Question

如何使用插入点动态加载聚合物元素。我想根据我在母体聚合物元素中得到的类型加载子聚合物元素。

<polmer-element name="child-one" attributes="data">
    <template>
        {{data.name}}, {{data.age}}
    </template>
    <script>
        Polymer("child-one", {
        })
    <script>
</polmer-element>

<polmer-element name="child-two" attributes="data">
    <template>
        {{data.location}}
    </template>
    <script>
        Polymer("child-two", {
        })
    <script>
</polmer-element>

<polmer-element name="parent-element" attributes="dataList type">
    <template>
        <template repeat="data in dataList">
            //Here based on type, I want to load child-one or child-two. Ideally the number of childs will increase.
            //I need to send the data also along with that.
            //So it might be <child-one data="{{data}}"></child-one> or <child-two data="{{data}}"></child-two>
        </template>
    </template>
    <script>
        Polymer("parent-element", {
        })
    <script>
</polmer-element>

Answer 1

尝试这样：

<polymer-element id="child-one" name="child-one" attributes="data" noscript>
    <template>
       {{data.name}}, {{data.age}}
    </template>
</polymer-element>

<polymer-element name="child-two" attributes="data" noscript>
    <template>
        {{data.location}}
    </template>
</polymer-element>

<polymer-element name="parent-element" attributes="dataList type">
    <template>
      <template id="one">
        <child-one data="{{data}}"></child-one>
        </template>      
      <template id="two">
        <child-two data="{{data}}"></child-two>
        </template>      
        <template repeat="{{data in dataList}}">
          <template bind ref="{{type}}"></template>
        </template>
    </template>
  <script>
    Polymer('parent-element', {
      dataList: [{name:'a',age:1, location:'q'},{name:'b',age:2, location:'qq'},{name:'c',age:3, location:'qqq'},{name:'d',age:4, location:'qqqq'}]
    })
  </script>
</polymer-element>

<parent-element type="two">

</parent-element>

用于动态加载聚合物元件的插入点

1 个答案: