Polymer 1.0 data binding not working

Question

I have the following polymer element:

The value of navigator.currentStep is not updating after someMethod is called.

<dom-module id="m">
  <template>
    Navigator step = <span>{{navigator.currentStep}}</span>
  </template>
</dom-module>


Polymer({
        is: 'm',
        ready: function() {
          this.navigator = new Navigator(1);
          console.log(this.navigator.currentStep);  // 1
        },
        someMethod: function() {
          this.navigator.next();
          console.log(this.navigator.currentStep);   // 2
}
});

Output is always

Navigator step = 1

But the following works

<dom-module id="m">
  <template>
    Navigator step = <span>{{currentStep}}</span>
  </template>
</dom-module>


Polymer({
        is: 'm',
        ready: function() {
          this.navigator = new Navigator(1);
          this.currentStep = this.navigator.currentStep;   // 1
        },
        someMethod: function() {
          this.navigator.next();
          this.currentStep = this.navigator.currentStep;   // 2
}
});

Answer 1

Call this.notifyPath('navigator.currentStep', this.navigator.currentStep) .

See https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path .

Sometimes imperative code needs to change an object's sub- properties directly. As we avoid more sophisticated observation mechanisms such as Object.observe or dirty-checking in order to achieve the best startup and runtime performance cross-platform for the most common use cases, changing an object's sub-properties directly requires cooperation from the user.

Specifically, Polymer provides two API's that allow such changes to be notified to the system: notifyPath(path, value) and set(path, value) , where path is a string identifying the path (relative to the host element).