使用 JSON 作为参数调用聚合物内的聚合物元素

Calling a polymer element within a polyment with JSON as parameter

我正在调用另一个元素中的聚合物元素。内部聚合物元素有一个已发布的属性,我从父聚合物绑定 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 的就绪函数中分配硬编码值,它也不起作用。 如果我在这个 parent.Content 的创建函数中分配硬编码值,它就可以工作。 所以,我不确定这是否与在值绑定到父元素之前生成子聚合物元素有关。

谢谢, 山姆

这里是修改后的有效代码示例: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> 

我修改了你的 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>

主要问题好像是代码的顺序 我想先声明 child,然后声明 parent 效果更好,因为 child 用于 parent... 此外,如聚合物文档中所述: polymer

Important: For properties that are objects or arrays, you should always initialize the properties in the created callback. If you set the default value directly on the prototype (or on the publish object), you may run into unexpected “shared state” across different instances of the same element.