javascript - polymer 阵列在更改时不会更新 UI

Question

今天有很多 Polymer 1.0 问题，

我的 HTML 看起来像这样:

<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>

如您所见，我正在尝试循环出数组 cats 中的每个 cat。我的问题是 cats 数组更改了大约 4 次。第一次有一只猫，第二次有两只......等等，直到没有更多的变化。但似乎传播到 UI 的唯一更改是第一个 cat。

cats 数组在名为 presenceChanged 的回调中发生更改，当“在线”列表更改时，PubNub 会调用该回调，请参见下文:

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
};

所以，只是为了澄清一下。假设调用了 presentChanged-callback 4 次。每次列表都会包含一只猫(因此为“房间”中的每个用户调用一次)。在“最后”调用中，它将如下所示: ["cat_1","cat_2","cat_3","cat_4"] 但只有 ["cat_1"] 会以 UI 方式显示，为什么？ :/

Answer 1

您需要使用 Polymer 元素提供的数组突变方法(请参阅 dom-repeat 上的 docs):

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

在您的示例中，您需要使用 this.push('cats', d.uuid); 而不是实际数组上的 push 方法。 (同样的情况也适用于拼接等)