2

dom-repeat テンプレートを含む単純な dom-module があります。

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

次のエラーが表示されます。

キャッチされていない TypeError: 未定義のプロパティ 'extends' を読み取ることができません

私の2番目のコードではほぼ同じプロセスが機能しているため、どうすればよいかわかりません...

編集：

今では余分なモジュールを使用せず、「拡張」という言葉も使用しません...

            <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]: expected array for items, found Object」これを試してみると:

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

同じエラーが発生します。

4

1 に答える 1

0

いくつかのこと。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

このプランカーは主な変更点を示しています: 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>
于 2015-10-26T11:48:19.547 に答える