DOM不更新時，來自Polymer 0.5遷移到1.0

我使用dom-repeat填寫一張表中的行，正是如此後屬性更改：DOM不更新時，來自Polymer 0.5遷移到1.0

<tbody> 
    <template is="dom-repeat" items="{{list}}" as="row"> 
     <tr> 
      <template is="dom-repeat" items="{{headers}}" as="header"> 
       <td><template is="juicy-html" content$="{{getPropertyByName(row, header.name)}}"></template></td> 
      </template>  
     </tr> 
    </template> 
</tbody>

其中getPropertyByName()功能僅僅取消引用行：

getPropertyByName: function (listObj, name) { 
        return listObj[name]; 
}

之前升級到1.0，功能是沒有必要的，因爲我們可以簡單地直接解引用，即content="{{row[header.name]}}"。

我們有，通過點擊表頭所觸發的表中的排序功能，並且升級到1.0的數據錶行中的{{list}}結合之前意味着排序的this.list元素在我們的JS功能導致表在DOM中移動的行。由於Polymer 1.0無法如此工作，所以我不知道該如何提醒Polymer修改該屬性，我在排序後嘗試使用this.set('this.list.0', this.list[0]);，我從here獲得了一個想法，但這對我無效。我怎樣才能聚合物排序後我的數據綁定屬性在JS中更改DOM？

在此先感謝！

來源

2015-06-26 DannyH

'content =「{{row [header.name}}」'絕不會以您使用它的任何方式工作。 – leppie

dom-repeat內置了支持排序，有文檔這裏https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists。

基本上，您可以將sort函數（您爲Array.sort提供的相同類型的函數）附加到模板。

另外，您可以在模板上調用render()來強制重新渲染。

來源

2015-06-29 18:38:27

這肯定給我帶來了正確的方向，它現在正在工作（可惜，沒有juicy-html）。非常感謝！ – DannyH

對於任何可能遇到這種情況的人來說，[這裏]（http://jsbin.com/kahaye/edit?html,console,output）是Scott用'dom-repeat'寫的一些示例代碼，'sort '和'render（）'。 – DannyH

想知道，每次數據變化時，是否需要調用渲染函數？它是暫時的還是自Polymer 0.5以來發生了變化？ – sepans

要觸發刷新，您可以調用模板上的render（）。

this.$.templateID.render();

來源

2015-06-29 17:55:43

感謝您的新知識！我更新了答案，以反映正確的方式 –

DOM不更新時，來自Polymer 0.5遷移到1.0

回答

相關問題