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

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一样。 您可以在某些情况下使用命名范围跳回到父范围，但在这种情况下则不能。 在这里解释更多 。 （此外，您的代码在应该是item s -list时会说出item-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示例