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:

<templatebind="{{items}}"><h3>h3 {{tab}}</h3> <-- {{tab}} is undefined
  <item-listinitial="{{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.

<templateis="auto-binding"id="app"><paper-tabsselected="{{tab}}"valueattr="name"><templaterepeat="{{initial in pagination}}"><paper-tabname="{{initial}}">
        {{initial}}
      </paper-tab></template></paper-tabs><items-fieldtab="{{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-elementname="items-field"attributes="tab items"><template><h2>h2 {{t}}</h2><div>some other stuffs</div><h3>h3 {{tab}}</h3><items-listinitial="{{tab}}"items="{{items}}"></items-list></template><script>Polymer({
      tab: 'A'
    });
  </script></polymer-element><polymer-elementname="items-list"attributes="initial items"><template><div>{{initial}}</div><templaterepeat="{{item in items}}"><divhidden?="{{toHide(initial, item.name)}}">
        {{item.name}}
      </div></template></template><script>Polymer({

      ready: function () {

      },

      toHide: function (initial, name) {
        if (initial === undefined ||
            initial === name.charAt(0)) {
          returnfalse;
        }

        returntrue;
      }
    });
  </script></polymer-element>

JSBin example