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

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 object 的新范围。因此，在该范围内寻找 {{tab}} 就像要求 items.tab 这不是您想要的。在某些情况下，您可以使用命名范围跳回 parent 范围，但在这种情况下不行。 Explained more here。（此外，您的代码在应该是 items-list 时显示 item-list）。

所以我以不同的方式解决了这个问题，省略了对项目的绑定，只是将项目集合传递给 children。

<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

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

Polymer data-binding: how to access data in nested template?

html

javascript

web-component

polymer