如何在Polymer 2.x中設置屬性值？

Question

我在Polymer 2.x中遇到了一個簡單的問題。 我不知道如何從另一個元素類正確設置自定義元素屬性的值。

我的代碼：

<dom-module id="cookbook-wall">
<template>
    <style>
        // my styling
    </style>

    <div class="wall">
        <template is="dom-repeat" items="[[_getRecipesList()]]">
            <cookbook-recipe-card name="recipe-card"></cookbook-recipe-card>
        </template>
    </div>
</template>

<script>
    class CookbookWall extends Polymer.Element {
        static get is() {
            return 'cookbook-wall';
        }

        static get properties() {

        // this property is unused now, I tried to set it dynamically from 
        // method below but it also failed
            return {
                recipes: Array
            }
        }

        _getRecipesList() {
            var test = new CookbookRecipeCard();
            test.setData("This is test title", "This is test content");

            return [test, test, test];
        }
    }

    window.customElements.define(CookbookWall.is, CookbookWall);
</script>

和

<dom-module id="cookbook-recipe-card">
<template>
    <style include="shared-styles">
       // my styling
    </style>

    <div class="card">
        <div id="titleContent">{{title}}</div>

        <div class="my-block">
            <div class="contentCaption">Treść przepisu:</div>
            <div class="content">{{content}}</div>
        </div>
    </div>
</template>

<script>
    class CookbookRecipeCard extends Polymer.Element {
        static get is() {
            return 'cookbook-recipe-card';
        }

        static get properties() {
            return {
                myName: String,
                myContent: String
            }
        }

        setData(myTitle, myContent) {
            this.myTitle = myTitle;
            this.myContent = myContent;
        }

    }

    window.customElements.define(CookbookRecipeCard.is, CookbookRecipeCard);
</script>

如您所見，我想從另一個元素類中執行以下操作： setData(myTitle, myContent) ，但它不起作用。 有什么方法可以實現與Polymer中面向對象語言中的傳統setter相似的結果？

謝謝你的幫助！

編輯（我的解決方案）：

我刪除了自定義卡組件，只使用了普通紙卡：

<dom-module id="cookbook-wall">
<template>
    <style>...</style>

    <div class="wall">
        <template id="cardSet" is="dom-repeat" items="[[_getArray()]]" as="card">
            <paper-card id="myCard">
                <div class="card">
                    <div id="titleContent">[[card.title]]</div>

                    <div class="my-block">
                        <div class="contentCaption">Treść przepisu:</div>
                        <div class="content">[[card.text]]</div>
                    </div>
                </div>
            </paper-card>
        </template>
    </div>
</template>

<script>
    class CookbookWall extends Polymer.Element {
        static get is() {
            return 'cookbook-wall';
        }

        _getArray() {
            // example usage
            return [{'title': 'Title 1', 'text': 'Description 1'},
                {'title': 'Title 2', 'text': 'Description 2'},
                {'title': 'Title 3', 'text': 'Description 3'}];
        }
    }

    window.customElements.define(CookbookWall.is, CookbookWall);
</script>

Answer 1

這些只是常規的JavaScript / DOM屬性，因此可以在js中使用elements.recipeList = [item, item, item];設置它們elements.recipeList = [item, item, item]; 然后在您的模板中，dom中繼器可能看起來像

   <template is="dom-repeat" items="[[recipeList]]">
        <cookbook-recipe-card name="recipe-card" recipe="[[item]]"></cookbook-recipe-card>
    </template>

請注意，在此示例中，我是如何通過食譜屬性將商品作為食譜屬性傳遞給卡片的。

您還可以通過在主機元素中定義它來計算配方清單屬性

   static get properties() {
        return {
            recipeList: {
              type: Array,
              computed: "_getRecipeList(dependencies)"
        }
    }

計算屬性的優點是可以從元素外部讀取它們。

Answer 2

這是一個可能更好的設計。 它允許用戶cookbook-wall設置cards ，同時供給的缺省值cards 。

<dom-module id="cookbook-wall">
<template>
    <style>...</style>

    <div class="wall">
        <template id="cardSet" is="dom-repeat" items="[[cards]]" as="card">
            <paper-card id="myCard">
                <div class="card">
                    <div id="titleContent">[[card.title]]</div>

                    <div class="my-block">
                        <div class="contentCaption">Treść przepisu:</div>
                        <div class="content">[[card.text]]</div>
                    </div>
                </div>
            </paper-card>
        </template>
    </div>
</template>

<script>
    class CookbookWall extends Polymer.Element {
        static get is() {
            return 'cookbook-wall';
        }

        static get properties() {
          return {
            cards: {
              type: Array,
              value: () => {
                return [
                  {'title': 'Title 1', 'text': 'Description 1'},
                  {'title': 'Title 2', 'text': 'Description 2'},
                  {'title': 'Title 3', 'text': 'Description 3'}];
              }
          };
        }
    }

    window.customElements.define(CookbookWall.is, CookbookWall);
</script>