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

Question

我有一个简单的 dom 模块，里面有一个 dom-repeat 模板:

<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>

这里是我使用它的地方:

<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>

我收到这个错误:

未捕获的类型错误:无法读取未定义的属性“扩展”

请帮帮我，我不知道该怎么办， 因为在我的第二个代码中，几乎相同的过程正在运行......

---

编辑:

现在我不使用额外的模块，也不再使用“扩展”这个词......

            <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> 

新错误是:“[dom-repeat::dom-repeat]:项目的预期数组，找到对象” 如果我尝试这样做:

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

出现同样的错误。

Answer 1

几件事。根据 Polymer 的建议，将您的脚本元素移动到 dom-module 标签内。

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

其次，不要使用“extends”作为实例变量/属性名称。 Extends 是一个用于扩展现有 HTML 元素的 Polymer 关键字。

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

这个 Plunker 显示了关键的变化: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>