Polymer error when template is auto binding - polymer

Question

I'm trying to use core-list extension from polymer.
I used example from Google Developers from This YT Link
I add is="auto-binding" value to my template i go error:
Uncaught TypeError: Cannot set property 'data' of null
I'm also trying to set height: 100% to core-list , it's also not working , I got warning:
core-list must either be sized or be inside an overflow:auto div that is sized
Below I'm adding my code:
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-list/core-list.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<!--{{hash}-->
<polymer-element name="progress-page" attributes="hash">
<template>
<template is="auto-binding" id="app" style=" height:100%; overflow: auto;">
<core-list data="{{data}}" flex style=" height:100%;">
<template>
<div class="row" layout horizontal center>
<div data-index="{{index}}">{{model.name}}</div>
</div>
</template>
</core-list>
</template>
</template>
<script>
Polymer('progress-page', {
ready: function () {
this.selected = 0;
var app = document.querySelector('#app');
app.data = generateContacts();
function generateContacts() {
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
name: 'dddd',
string: 'asd'
});
}
return data;
}
}
});
</script>
</polymer-element>
Cam somebody please tell me what's wrong ? This is 1:1 version from link I've added.

Answer 1

You shouldn't be using template is="auto-binding" inside a Polymer element. The whole point of an autobinding template is that it allows you to set up data binding outside a Polymer element.
So you're combining two concepts here. These two lines are what you'd use if you were using an auto-binding template in your main page:
var app = document.querySelector('#app');
app.data = generateContacts();
Here you're trying to retrieve a reference to the auto-binding template and add a data property to it.
This won't work in your context. '#app' is inside <progress-page>'s shadow DOM, so document.querySelector won't find it.
This line, on the other hand, is adding a property to the <progress-page> element, which is the proper thing to do if you're using core-list inside an element:
this.selected = 0;
So if you want to use an auto-binding template, eliminate the Polymer element and use the first approach (querySelector and assign app.data, app.selected).
If you want to create a Polymer element, eliminate the auto-binding template and use the second approach:
this.data = generateContacts();
this.selected = 0;
Here's a working version of this code with the auto-binding template removed:
http://jsbin.com/lofega/2/edit