聚合物 dom-repeat 未按预期显示

Question

我有这个 Polymer 自动绑定模板：

<dom-module id="my-app">
<template>
  <template is="dom-repeat" items={{myItem}}>
    <span>{{item}}</span>
  </template>
</template>
</dom-module>

<script>
  Polymer({
    is: "my-app",
    ready: function() {
      this.myItem = [];
    },
    addItem: function(item) {
      console.log(this.myItem);
      this.myItem.push(item);
      console.log(this.myItem);
    }
  });
</script>

我将在 javascript 函数中调用 document.querySelector("my-app").addItem("abcd")。但是，我不知道为什么这些项目不显示。但是，控制台日志功能会显示预期结果。

Answer 1

items="{{myItem}}" 之类的绑定仅在 myItem 集合设置为新数组时才会收到通知。如果你执行

document.querySelector('my-app').myItem = [1,2,3]

dom-repeat 模板将被更新。但是通过简单地添加一个项目

document.querySelector('my-app').myItem.push(4)

不会。您需要改用Polymers array mutation methods：

document.querySelector('my-app').push('myItem', 5)

顺便说一句。我建议写

<template is="dom-repeat" items="[[myItems]]">

在 items 属性周围加上双引号，方括号而不是花括号，因为这实际上只是一个 one-way binding 和复数的属性名称，因为 myItems 是项目的集合。