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 hav

Solution 1:

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

This bit here:

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

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 example