Question

我已经建立了一个数组，如下所示：

<template>
  <ul id="iconContainer" style="list-style: none; padding: 0; margin: 0;">
    <template repeat="{{icon in icons}}">
      <li class="flex icon-container"><app-icon label="{{icon.label}}" src="{{icon.src}}"></app-icon></li>
    </template>
  </ul>
</template>
<script>
  Polymer('app-grid', {
    ready: function() {
      this.icons = [];
      for(i = 1; i < 21; i++) {
        this.icons.push({label: 'Item ' + i, src: '*'});
      },
      iconChanged: function() {
        this.$.iconContainer.getElementsByTagName('template')[0].iterator_.updateIteratedValue();
      }
  });
</script>

我在试图找出如何从index.html上的jquery更改此数组时感到沮丧，如下所示更新模板。

<app-grid></app-grid>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).querySelector('app-grid').icons.push({label: 'foo', src: '*'});
</script>

这似乎不起作用。

思想？

Answer 1

我不确定为什么你需要jquery。 document.querySelector('app-grid')可以很好地获取元素。

在讨论元素属性之前，元素需要升级。 polymer-ready事件是您升级所有元素的信号：

document.addEventListener('polymer-ready', function(e) {
  document.querySelector('app-grid').icons.push({label: 'foo', src: '*'});
});

演示：http://jsbin.com/wasafomesuba/1/edit

Polymer：使用JQuery更改数组和模板

1 个答案: