CODEWITHSUNDEEP
polymer
woj_jas
woj_jas

Reputation: 1088

Polymer error when template is auto binding

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.

Upvotes: 0

Views: 125

Answers (1)

DocDude
DocDude

Reputation: 2873

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

Upvotes: 1

Related Questions