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

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

本文关键字：嵌套 数据 访问 数据绑定 何访问 聚合物      更新时间：2024-04-20

我想实现一个包含纸质选项卡的页面，每个选项卡根据名称首字母显示项目列表。我想知道数据绑定的最佳方式是什么。

此外，我在访问嵌套模板中的数据时遇到了一些问题。当我点击不同的选项卡时，它并不像我预期的那样工作。

这是简化的代码：

//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>

我认为您遇到的主要问题是混淆了绑定范围。

此处为：

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

通过绑定到items，您创建了一个特定于items对象的新作用域。因此，在这个范围内寻找{{tab}}，就像要求items.tab，这不是你想要的。在某些情况下，您可以使用命名作用域跳回父作用域，但在这种情况下不能。在这里解释更多。（此外，您的代码表示item-list何时应该是items-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示例

相关文章：