Polymer 1.0 dom-repeat fails "Uncaught TypeError: Cannot read property 'extends' of undefined"

Question

I have a simple dom-module with an dom-repeat template in it:

<dom-module id="bookmark-extends">
<style>(...)</style>
<template>
        <template is="dom-repeat" items="[[extends]]" as="extend">
                <a href="[[extend.url]]">
                <paper-button>[[extend.__firebaseKey__]]</paper-button>
                </a>
        </template>
</template>
</dom-module>
<script>
Polymer({
is: 'bookmark-extends',
properties: {
    extends: {
        type: Array,
        notify: true,
        value: function(){ return []; }
    }
}
});
</script>

Here where I use it:

<dom-module id="bookmark-cards">
<style>(...)</style>
<template>
    <firebase-collection
        location="*******"
        data="{{bookmarks}}"></firebase-collection>
    <template is="dom-repeat" items="[[bookmarks]]" as="bookmark">
        (...)
            <div hidden="[[!bookmark.extendable]]" class="card-actions">
                <bookmark-extends extends="[[bookmark.extends]]">
                </bookmark-extends>
            </div>     
            <div hidden="[[!bookmark.searchable]]" class="card-actions">
                <input-search-on-site id="input" website-name="[[bookmark.__firebaseKey__]]" website-search-url="[[bookmark.searchUrl]]">
                </input-search-on-site>
            </div>          
        </paper-card>
    </template>
 </template>
</dom-module>
<script>Polymer({
is: 'bookmark-cards'
});</script>

I'm getting this error:

Uncaught TypeError: Cannot read property 'extends' of undefined

Please help me, I don't know what to do, because in my second code the nearly same process is working...

EDIT:

Now I don't use an extra module and don't use the word "extend" anymore...

            <div hidden="[[!bookmark.expandable]" class="card-actions">
                <template is="dom-repeat" items="[[bookmark.links]]" as="link">
                    <a href="{{link.url}}"><paper-button>{{link.__firebaseKey__}}</paper-button></a>
                </template>
            </div>

The new Error is: "[dom-repeat::dom-repeat]: expected array for items, found Object" If I try this:

properties: {
    links: {
        type: Array,
        notify: true,
        value: function(){ return []; }
    }
}

The same error comes.

May not be related to your problem, but 'extends' is a keyword, you should not use it to name variables. — Hugo Zapata, Oct 20 '15 at 22:15
Thank you! Now I don't get any Errors anymore, but it doesn't work :( — SPJS01Pro, Oct 21 '15 at 19:08
try testing the bookmark component without firebase, if it works, then it's something related to the firebase component — Hugo Zapata, Oct 21 '15 at 19:11

score 0 · Answer 1 · answered Oct 26 '15 at 11:48

Couple of things. Move your script element inside the dom-module tag, as per Polymer recommendations.

https://www.polymer-project.org/1.0/docs/devguide/properties.html

Secondly don't use "extends" as an instance variable/property name. Extends is a Polymer keyword for extending existing HTML elements.

https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html

This Plunker shows the key changes: http://plnkr.co/edit/BKzrfC

<dom-module id="bookmark-extends">
<template>
        <template is="dom-repeat" items="[[extnds]]" as="extend">
                <div>extend</div>
        </template>
</template>
<script>
Polymer({
is: 'bookmark-extends',
properties: {
    extnds: {
        type: Array,
        notify: true,
        value: function(){ return ['one', 'two']; }
    }
}
});
</script>
</dom-module>

Polymer 1.0 dom-repeat fails "Uncaught TypeError: Cannot read property 'extends' of undefined"

I have a simple dom-module with an dom-repeat template in it:

Here where I use it:

EDIT:

1 Answers1