Polymer one-way-binding not working

Question

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/

whats this _setTimeRange function? I suppose within this you call this.set('timeRange', 'day')? — Pascal L.
Well based on the code you posted it is imposible to help please post more code and also please write real polymer for instance <dom> does not exist as tag mabye you could provide a fiddle which would help a lot — Pascal L.

derbur derbur · Accepted Answer · 2017-07-29T21:49:44

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.

Polymer one-way-binding not working

1 Answers