如何在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>