CODEWITHSUNDEEP
javascripthtmlpropertiespolymer
amigian74
amigian74

Reputation: 77

Polymer one-way-binding not working

After hours of trying I'm clueless. Maybe some of you have the answer. I've create a Polymer template like this:

<dom>
</dom>
<script>
Polymer ({
  is: 'foo',
  proprties: {
    timeRange: {
     type: String,
     value: 'day',
     readOnly: true,
     observer: "_refresh",
    },
    ...
  },
  ...
});
</script>

The observer function is just for debugging. The calling host uses this like that:

<dom>
  <foo time-range='[[timeRange]]'></foo>
</dom>
<script>
Polymer ({
  is: 'host',
  proprties: {
    timeRange: {
     type: String,
     value: 'day',
     readOnly: true,
     notify: true,
     observer: "timeRangeChanged",
    },
    ...
  },
  onDayTap: function() {
    this._setTimeRange('day');
  },

  onMonthTap: function() {
    this._setTimeRange('month');
  },

  onYearTap: function() {
    this._setTimeRange('year');
  },
  ...
});
</script>

The 'timeRangeChanged' observer refreshes a chart. But the timeRange-property in foo never gets changed - the _refresh-observer gets called only once on start. What am I doing wrong.

Hope somebody can help me out here

PS. I'm using Polymer 1.0

Hope this will help:

https://jsfiddle.net/fLbp26kp/

Upvotes: 0

Views: 108

Answers (1)

derbur
derbur

Reputation: 81

Polymer ({
  is: 'foo',
  properties: {
    timeRange: {
     type: String,
     value: 'day'
     observer: "_refresh",
    }
  }
});

If you're trying to update foo.timeRange you would need to remove readOnly from timeRange in order for it to be set from somewhere else. Foo without readOnly.

Upvotes: 2

Related Questions