javascript - 如何将数据推送到 Polymer dom-repeat 模板？

Question

假设我有以下代码，它是带有标题和文本的卡片集合:

<template id="cardSetFoo" is="dom-bind">
  <template id="cardSet" is="dom-repeat" items="[[data]]">
    <paper-card>
      <div class="card-body">
        <h4>[[item.title]]</h4>
        [[item.text]]
      </div>
    </paper-card>
  </template>
</template>

我想填充这组卡片:

document.querySelector('#cardSet').push('data',[{'title':'Title','text':'Description'}]);

我不断收到Uncaught TypeError: Cannot read property 'length' of undefined(…) (notify-path.html:476)

谁能告诉我如何填充 dom-repeat 模板？谢谢!

Answer 1

试试这个

var app = document.querySelector('#cardSetFoo');
if (!app.data) {
  app.data = [];
}
app.push('data', [{'title':'Title','text':'Description'}]);

您的 dom-repeat 代码不正确。您必须使用 item 来访问 dom-repeat 内的数组项。您可以使用 as 属性为其指定不同的名称，如下所示

<template id="cardSetFoo" is="dom-bind">
  <template id="cardSet" is="dom-repeat" items="[[data]]" as="card">
    <paper-card>
      <div class="card-body">
        <h4>[[card.title]]</h4>
        [[card.text]]
      </div>
    </paper-card>
  </template>
</template>