使用 JSON 作为参数调用 polyment 中的聚合物元素答案

【问题标题】：Calling a polymer element within a polyment with JSON as parameter使用 JSON 作为参数调用 polyment 中的聚合物元素
【发布时间】：2015-01-30 12:22:15
【问题描述】：

我在另一个元素中调用聚合物元素。内部聚合物元素有一个已发布的属性，我将来自父聚合物的 JSON 绑定到该属性。但是它没有得到反映。

<polymer-element name="parent-test" attributes="testData">
    <template>

        This is Parent test
        <child-test testdatachild="{{testData}}"></child-test>

    </template>
    <script>
        Polymer('parent-test', {
            testData: [],
            ready: function () {
                debugger;
                this.testData = [1, 2, 3, 4]
            }
        });
    </script>
</polymer-element>


<polymer-element name="child-test" attributes="testDataChild">
    <template>
        <!--{{testDataChild}}-->
        <template repeat="{{test in testDataChild}}">
            {{test}}
        </template>


    </template>
    <script>
        Polymer('child-test', {
            testDataChild: [],
            ready: function () {
                debugger;
            }
        });
    </script>
</polymer-element>

我不确定这里可能是什么问题。

编辑：似乎在生成子聚合物元素时我没有实际的 parentContent。如果我在 this.parentContent 的 ready 函数中分配硬编码值，它也不起作用。如果我在这个 parent.Content 的创建函数中分配硬编码值，它就可以工作。所以，我不确定这是否与在值绑定到父级之前生成子聚合物元素有关。

谢谢，山姆

【问题讨论】：

似乎在生成时我没有实际的 parentContent。如果我在 this.parentContent 的 ready 函数中分配硬编码值，它也不起作用。如果我在这个 parent.Content 的创建函数中分配硬编码值，它就可以工作。所以，我不确定这是否与在值绑定到父级之前生成子聚合物元素有关。

标签： polymer

【解决方案1】：

我修改了您的 plunk 示例并在没有您的解决方法的情况下使其正常工作： Plunk

<polymer-element name="child-test" attributes="testdatachild">
<template>
    <br><br>
    In Child el.:
    <br>
    <template repeat="{{test in testdatachild}}">
      {{test}}
      <br>
    </template>


</template>
<script>
    Polymer('child-test', {
        ready: function () {
        }
    });
</script>

    This is Parent test
    <child-test testdatachild="{{testData}}"></child-test>
  <br>

</template>
<script>                 
    Polymer('parent-test', {
        created: function () {
          this.testData = [1, 2, 3, 4];
        }
    });
</script>

主要问题似乎是代码的顺序我想最好先声明孩子，然后再声明父母，因为孩子在父母中使用...... 此外，如聚合物文档中所述： polymer

重要提示：对于对象或数组的属性，您应该始终在创建的回调中初始化属性。如果您直接在原型（或发布对象）上设置默认值，您可能会在同一元素的不同实例之间遇到意外的“共享状态”。

【讨论】：

很棒的冲击波。更改参考有效。我现在觉得很傻。 :P

【解决方案2】：

这里是修改后的代码示例：Plunk

为什么你的例子不起作用，我没有所有的答案买你是正确的：

<!-- This won't work cause:
       "Attributes on child-test were data bound prior to Polymer upgrading the element. 
       This may result in incorrect binding types." -->
        This is Parent test
    <child-test testdatachild="{{testData}}"></child-test>

【讨论】：