聚合物：改變使用JQuery

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> 

而且我越來越對試圖找出如何改變來自jQuery的數組索引上受挫。 html，如下所示更新模板。

<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