CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Tyler Beatty
Tyler Beatty

Reputation: 3

Polymer sub-properties in <dom-repeat>

In the polymer docs on "dom-repeat"it says:

Notifications for changes to items sub-properties are forwarded to the template instances, which update via the normal structured data notification system .

I thought this to mean that if I change one element of an array that it would update any bound elements. I'm not finding this to be the case. With this in mind it seems the only option for updating sub-properties would be to rebuild the array using the array methods or custom functions, which would be increasingly difficult with larger data. Or to somehow add observers to all sub-properties, which doesn't feel efficient. Any suggestions?

Example that doesn't work: http://jsbin.com/wadeju/1/edit?html,output

(function(){
  Polymer({
    is: 'x-element',
    properties:{
      d:{
        type: String,
        value:"Click Me"
      },
      days:{ 
        type: Array,
        value: ["one", "two", "three"]
      }
    },
    c:function(){
        this.days[0] = "1";
        this.days[1] = "2";
        this.days[2] = "3";
        this.d="hello";
     },
  });

Example that works: http://jsbin.com/luqudo/edit?html,output

Polymer({
        is: 'x-element',
        properties:{
          d:{
            type: String,
            value:"Click Me"
          },
          days:{ 
            type: Array,
            value: ["one", "two", "three"]
          }
        },
        c:function(){
            this.days = ["1", "2", "3"]
            this.d="hello";
         },
      });
    })();

Upvotes: 0

Views: 380

Answers (1)

user120242
user120242

Reputation: 15268

Recommended way to bind array values:
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#array-binding

Note that dom-repeat examples also use named objects within an array for bindings.

You should use Polymer's (array) mutation methods to maintain sync:
https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-mutation

Example that just sets data using Polymer's property mutation:
http://jsbin.com/zuhecovequ/1/edit?html,output

(function(){
  Polymer({
    is: 'x-element',
    properties:{
      d:{
        type: String,
        value:"Click Me"
      },
      days:{ 
        type: Array,
        value: ["one", "two", "three"]
      }
    },
    c:function(){
        this.set("days.0","1");
        this.set("days.1","2");
        this.set("days.2","3");
        this.d="hello";
     },
  });
})();

Upvotes: 0

Related Questions