聚合物数据绑定：如何访问嵌套模板中的数据？

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