Question

今天聚合物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>

正如您所看到的，我正在尝试循环播放数组cat中的每个cats。我的问题是cats - 数组变化大约4次。它第一次有一个cat，第二次有两个......依此类推，直到没有更多的变化。但似乎传播到UI的唯一变化是第一个cat。

在一个名为presenceChanged的回调中更改了cats数组，当＆＃34; online＆＃34; -list更改时，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次。每次列表中都会包含一个猫（因此，对于＃34; room＆＃34中的每个用户，它都会被调用一次）。在＆＃34; last＆＃34;调用它看起来像：["cat_1","cat_2","cat_3","cat_4"]但只有["cat_1"]会以UI方式显示，为什么？：/

Answer 1

您需要使用Polymer元素提供的数组变异方法（请参阅dom-repeat上的docs）：

items数组本身的变异（push，pop，splice，shift，unshift）必须使用Polymer元素上提供的方法执行，这样更改对于绑定到树中相同数组的任何元素都是可观察的。例如

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

聚合物阵列在更改时不会更新UI

1 个答案: