CODEWITHSUNDEEP
javascripthtmlpolymerpolymer-1.0
Whyser
Whyser

Reputation: 2247

Polymer array won't update UI when changed

A lot of Polymer 1.0 problems today,

My HTML look like this:

<section class="layout vertical" id="onlineList">
        <paper-item class="subdue layout horizontal center">Online Now</paper-item>
        <template is="dom-repeat" items="{{cats}}" as="cat">
            <paper-item>{{cat}}</paper-item>
        </template>
</section>

As you can see I'm trying to loop out each cat in the array cats. My problem is that the cats-array changes about 4 times. The first time it has one cat, second time two..and so on, until there is no more changes. But it seems that the only change that is propogated to the UI is the first cat.

The cats array is changed in a callback called presenceChanged which PubNub calls when the "online"-list changes, see below:

template.presenceChanged = function(e) {
    var l = template.$.sub.presence.length;
    var d = template.$.sub.presence[l - 1];

    // who are online
    if(d.action === 'join') {
        if(d.uuid.length > 35) { // console
            d.uuid = 'the-mighty-big-cat';
        }
        onlineUuids.push(d.uuid);
    } else {
        var idx = onlineUuids.indexOf(d.uuid);
        if(idx > -1) {
            onlineUuids.splice(idx, 1);
        }
    }

    // display at the left column
    template.cats = onlineUuids;

    //.. some code
};

So, just to clarify. The presentChanged-callback is called, lets say 4 times. And each time the list will contain one more cat (so it's called once for every user which is in the "room"). In the "last" call it will look like: ["cat_1","cat_2","cat_3","cat_4"] but only ["cat_1"] will be shown UI-wise, why? :/

Upvotes: 0

Views: 415

Answers (1)

&#220;mit
&#220;mit

Reputation: 17489

You need to use the the array mutation methods provided by the Polymer elements (see docs on dom-repeat):

Mutations to the items array itself (push, pop, splice, shift, unshift) must be performed using methods provided on Polymer elements, such that the changes are observable to any elements bound to the same array in the tree. For example

In your example you need to use this.push('cats', d.uuid); instead of the push method on the actual array. (same thing applies to the splice, etc)

Upvotes: 3

Related Questions