Question

我有这个聚合物自动绑定模板：

<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是项的集合。

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

1 个答案: