聚合物數據綁定：如何訪問嵌套模板中的數據？

Question

我想實現一個包含紙張選項卡的頁面，每個選項卡根據名稱初始值顯示一個項目列表。我想知道數據綁定的最佳方式是什麼。

另外我有一些麻煩訪問嵌套模板中的數據。當我點擊不同的標籤時，它不像我預期的那樣工作。

下面是簡化的代碼：

//page 
<paper-tabs selected="{{tab}}"> 
    <template repeat="{{inital in pagination}}"> 
    <paper-tab name="{{initial}}"> 
     {{initial}} 
    </paper-tab> 
    </template> 
</paper-tabs> 

<items-field 
    tab="{{tab}}" 
    items="{{items}}"> 
</items-field> 


//items-field 
<polymer-element name="items-field" attributes="tab items"> 
    <template> 
    <h2>h2 {{tab}}</h2> 
    <div>some other stuffs</div> 
    <template bind="{{items}}"> 
     <h3>h3 {{tab}}</h3> <-- {{tab}} is undefined 
     <item-list 
     initial="{{tab}}" 
     </item-list> 
    </template> 
    </template> 
    <script> 
    Polymer({ 
    tab: 'A' 
)} 
    </script> 
</polymer-element> 


//item-list 
<polymer-element name="items-list" attributes="initial"> 
    <template> 
    <template repeat="{{item in items}}"> 
     <item 
     hidden?="{{toHide(initial, item.name)}}"> 
     </item> 
    </template> 
    </template> 

    <script> 
    Polymer({ 
     ready: function() { 
     this.items = this.templateInstance.model; 
     console.log(this.initial); // <-- undefined 
     }, 

     toHide: function (initial, name) { 
     if (initial === undefined || 
      initial === name.charAt(0)) { 
      return false; 
     } 

     return true; 
     } 
    }); 
    </script> 
</polymer-element> 

Answer 1

我認爲你正在運行到的主要問題是搞亂你的綁定範圍。

這裏這一點：

<template bind="{{items}}"> 
    <h3>h3 {{tab}}</h3> <-- {{tab}} is undefined 
    <item-list initial="{{tab}}" 
    </item-list> 
</template> 

通過結合items，您創建特定於items對象的新範圍。因此，在該範圍內尋找{{tab}}，就像要求items.tab這不是你想要的。在某些情況下，您可以使用命名範圍跳回到父範圍，但在這種情況下不能。 Explained more here。 （此外，您的代碼說明項目列表應該是項目s -list）。

所以我以不同的方式解決了這個問題，方法是省略對項目的綁定並將項目集合傳遞給子項。

<template is="auto-binding" id="app"> 

    <paper-tabs selected="{{tab}}" valueattr="name"> 
    <template repeat="{{initial in pagination}}"> 
     <paper-tab name="{{initial}}"> 
     {{initial}} 
     </paper-tab> 
    </template> 
    </paper-tabs> 

    <items-field tab="{{tab}}" 
       items="{{items}}"> 
    </items-field> 

</template> 

<script> 
    var app = document.querySelector('#app'); 
    app.pagination = ['A', 'B', 'C']; 
    app.tab = 'B'; 
    app.items = [{name: 'Alpha'}, {name: 'Beta'}, {name: 'Charlie'}]; 
</script> 

<polymer-element name="items-field" attributes="tab items"> 
    <template> 
    <h2>h2 {{t}}</h2> 
    <div>some other stuffs</div> 
    <h3>h3 {{tab}}</h3> 
    <items-list initial="{{tab}}" items="{{items}}"></items-list> 
    </template> 
    <script> 
    Polymer({ 
     tab: 'A' 
    }); 
    </script> 
</polymer-element> 

<polymer-element name="items-list" attributes="initial items"> 
    <template> 
    <div>{{initial}}</div> 
    <template repeat="{{item in items}}"> 
     <div hidden?="{{toHide(initial, item.name)}}"> 
     {{item.name}} 
     </div> 
    </template> 
    </template> 

    <script> 
    Polymer({ 

     ready: function() { 

     }, 

     toHide: function (initial, name) { 
     if (initial === undefined || 
      initial === name.charAt(0)) { 
      return false; 
     } 

     return true; 
     } 
    }); 
    </script> 
</polymer-element> 

JSBin example