聚合物数据绑定:如何访问嵌套模板中的数据? [英] Polymer data-binding: how to access data in nested template?

问题描述

我想实现一个包含纸制标签的页面，每个标签根据名称的开头显示项目列表.我想知道什么是数据绑定的最佳方法.

I want to implement a page containing a paper-tabs, with each tab showing a list of items according to the name initial. I wonder what is the best way for data-binding.

另外，我在访问嵌套模板中的数据时遇到了一些麻烦.当我点击其他选项卡时，它无法按预期工作.

Also I have some trouble to access the data in the nested template. When I tap different tabs, it is not working as I expect.

这是简化的代码:

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

推荐答案

我认为您遇到的主要问题是弄乱了绑定范围.

I think the main issue you're running into is messing up your binding scopes.

此位:

<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).

By binding to items, you've created a new scope specific to the items object. So looking for {{tab}} within that scope, is like asking for items.tab which is not what you want. You can jump back to the parent scope in certain situations using named scopes, but not in this case. Explained more here. (Also, your code says item-list when it should be items-list).

因此，我通过省略对项目的绑定，而仅将项目集合传递给孩子来解决此问题.

So I solved this in a different way by omitting the bind to items and just passing the items collection down to the 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示例

这篇关于聚合物数据绑定:如何访问嵌套模板中的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！