Polymer 迭代聚合物含量插入点

我想要的是以下html：

<father name = "John">
  <son name = "Bob">likes lollipops</son>
  <son name = "David">likes computers</son>
</father>

现在，假设我已经正确地编写了“son”polymer标记，它呈现了一个block div，内容是“Bob:likes lolipops”。这使我可以轻松地工作，因此我有：

John

Bob: likes lolipops
David: likes computers

然而，为了达到这一目标，我真的不确定正确的方法是什么，基本上我希望这样：

<polymer-element name = "father" attributes = "name">
    <template>
        <style>...
        </style>
        <div layout vertical>
            {{name}} has ???{count}??? sons, ???{{ iterate son nodes, print out name attribute for each }}???<br/>
            <!-- I dont know how ot access JS here, so not sure how to turn all child nodes into a children array -->
            <content select = "son"></content>
        </div> 
    </template>
    <script>
        Polymer({});
    </script>
</polymer-element>

...
{{name}}有？？？{count}？？？子节点，，{{迭代子节点，打印每个}}的名称属性？

聚合物（{}）；

可能有几种方法可以做到这一点，但这里有一种方法。（上的完整版本）

{{name}}：

{{name}有{{count}}个儿子，{{{sons}}：


聚合物({
计数：0，
儿子们：，
domReady:function（）{
var name=[].map.call（this.children，函数（sonElement）{
返回sonElement.name；
});
this.count=names.length；
this.sons=names.join（'and'）；
}
});
我喜欢棒棒糖
我喜欢电脑

关键部件是钩住

的

domReady

，并检查其、erm、

子项。因为我们知道它们都是
s，所以我们只是盲目地查找它们的名称属性并将它们映射到一个数组，但是如果需要，您可以采取一些步骤只查询
s

（哦，聚合物元素的名称中都需要有一个
-
，因此您需要使用
（或类似的名称）而不是
）
这是我的解决方案，它基于Jeff Posnick的解决方案，但有Scott Miles的建议，以听取添加-删除-事件

<polymer-element name="baby-element" attributes="name">
  <template>
    <p>{{name}}: <content></content> <input type="button" value="Kill Baby" on-click="{{killBaby}}"/></p>
  </template>
  <script>
    Polymer("baby-element", {
      attached: function(){
        this.fire('baby-added');
      },
      killBaby: function(){
        this.fire('baby-removed');
  //    this.remove();
      },
      detached: function() {
        this.fire('baby-removed');
      }
    });
  </script>
</polymer-element>

<polymer-element name="parent-element" attributes="name">
  <template>
    <p>{{name}} has {{count}} babys, {{babys}}:</p>
    <p><content id="content"></content></p>
  </template>
  <script>
    Polymer({
      count: 0,
      babys: '',
      domReady: function() {
        this.recalcBabys();
        this.addEventListener('baby-added', this.babyAdded);
        this.addEventListener('baby-removed', this.babyRemoved);
      },
      babyRemoved: function(e) {
        e.target.remove();
        this.recalcBabys();
      },
      babyAdded: function(e) {
        this.recalcBabys();
      },
      recalcBabys: function(){
        var names = [].map.call(this.children, function(babyElement) {
          return babyElement.name;
        });
        this.count = names.length;
        this.babys = names.join(' and ');
      }
    });
  </script>

</polymer-element>

<h1>It's aparent baby thing:</h1>
<input type=button value="make baby" id="makeBaby"></input>
<input type=input placeholder="baby name" id="babyName"></input>
<input type=input placeholder="baby info" id="babyInfo"></input>

<parent-element id="parent" name="Slim Sim">
  <baby-element name="Curie">has X</baby-element>
  <baby-element name="Korbut">volts like no other!</baby-element>
  <baby-element name="Pavlov">has dogs!</baby-element>
  <baby-element name="Schrodinger">... maybe has a cat?</baby-element>
</parent-element>


<script>
  document.getElementById('makeBaby').addEventListener('click', function(){
    var name = document.getElementById('babyName');
    var info = document.getElementById('babyInfo');
    var parent = document.getElementById('parent');
    var baby = document.createElement("baby-element");
    var inner = document.createTextNode(info.value);
    baby.appendChild(inner);
    baby.setAttribute("name",name.value);
    parent.appendChild(baby);
  });
</script>


{{name}}：

聚合物（“婴儿元素”{
附：函数（）{
这个。火（“婴儿添加”）；
},
killBaby:function（）{
这是一场火灾（“婴儿移除”）；
//这个。删除（）；
},
分离：函数（）{
这是一场火灾（“婴儿移除”）；
}
});
{{name}}有{{count}}个婴儿，{{{babys}}：


聚合物({
计数：0，
宝贝们：''，
domReady:function（）{
这个。recalcbays（）；
this.addEventListener（'baby-added'，this.babyAdded）；
this.addEventListener（'baby-removed'，this.babyRemoved）；
},
babyRemoved:函数（e）{
e、 target.remove（）；
这个。recalcbays（）；
},
婴儿型：功能（e）{
这个。recalcbays（）；
},
recalcbays:function（）{
var name=[].map.call（this.children，函数（babyElement）{
返回babylement.name；
});
this.count=names.length；
this.babys=names.join（'and'）；
}
});
这是一件非常有趣的事情：
有X
伏特是独一无二的！
有狗！
... 也许你有一只猫？
document.getElementById（'makeBaby'）。addEventListener（'click'，function（）{
var name=document.getElementById（'babyName'）；
var info=document.getElementById（'babyInfo'）；
var parent=document.getElementById（'parent'）；
var baby=document.createElement（“baby元素”）；
var internal=document.createTextNode（info.value）；
婴儿。婴儿（内）；
setAttribute（“name”，name.value）；
父母、子女（婴儿）；
});

如果从外部移除婴儿，我无法使父元素重新计算eBay，例如
document.getElementsByTagName（'baby-element'）[0]。remove（）

我希望（在baby元素上）只使用attached和detached方法触发baby added和baby remove事件，而killBaby函数只执行“this.remove（）”。
但我无法让父母听到所有这些事件

请随时仔细检查此代码并告诉我任何错误，我对Polymer有点陌生，但我仍然希望我能有所贡献
 ProTip：这是一个很好的解决方案，但是检查
这个问题。由于两个原因，儿童
的效用有限：（1）如果元素被投影（通过
），它们将不在
儿童
中；（2）儿童可能来来去去。只要有可能，明确地握手。例如，让
在
附加（）
时触发添加的
子事件，在
分离（）
时触发删除的
子事件。父元素可以侦听这些事件并直接管理关系。
<polymer-element name="son-element" attributes="name" noscript>
  <template>
    <p>{{name}}: <content></content></p>
  </template>
</polymer-element>

<polymer-element name="father-element" attributes="name">
  <template>
    <p>{{name}} has {{count}} sons, {{sons}}:</p>
    <p><content id="content"></content></p>
  </template>
  <script>
    Polymer({
      count: 0,
      sons: '',
      domReady: function() {
        var names = [].map.call(this.children, function(sonElement) {
          return sonElement.name;
        });
        this.count = names.length;
        this.sons = names.join(' and ');
      }
    });
  </script>
</polymer-element>

<father-element name="John">
  <son-element name="Bob">likes lollipops</son-element>
  <son-element name="David">likes computers</son-element>
</father-element>

<polymer-element name="baby-element" attributes="name">
  <template>
    <p>{{name}}: <content></content> <input type="button" value="Kill Baby" on-click="{{killBaby}}"/></p>
  </template>
  <script>
    Polymer("baby-element", {
      attached: function(){
        this.fire('baby-added');
      },
      killBaby: function(){
        this.fire('baby-removed');
  //    this.remove();
      },
      detached: function() {
        this.fire('baby-removed');
      }
    });
  </script>
</polymer-element>

<polymer-element name="parent-element" attributes="name">
  <template>
    <p>{{name}} has {{count}} babys, {{babys}}:</p>
    <p><content id="content"></content></p>
  </template>
  <script>
    Polymer({
      count: 0,
      babys: '',
      domReady: function() {
        this.recalcBabys();
        this.addEventListener('baby-added', this.babyAdded);
        this.addEventListener('baby-removed', this.babyRemoved);
      },
      babyRemoved: function(e) {
        e.target.remove();
        this.recalcBabys();
      },
      babyAdded: function(e) {
        this.recalcBabys();
      },
      recalcBabys: function(){
        var names = [].map.call(this.children, function(babyElement) {
          return babyElement.name;
        });
        this.count = names.length;
        this.babys = names.join(' and ');
      }
    });
  </script>

</polymer-element>

<h1>It's aparent baby thing:</h1>
<input type=button value="make baby" id="makeBaby"></input>
<input type=input placeholder="baby name" id="babyName"></input>
<input type=input placeholder="baby info" id="babyInfo"></input>

<parent-element id="parent" name="Slim Sim">
  <baby-element name="Curie">has X</baby-element>
  <baby-element name="Korbut">volts like no other!</baby-element>
  <baby-element name="Pavlov">has dogs!</baby-element>
  <baby-element name="Schrodinger">... maybe has a cat?</baby-element>
</parent-element>


<script>
  document.getElementById('makeBaby').addEventListener('click', function(){
    var name = document.getElementById('babyName');
    var info = document.getElementById('babyInfo');
    var parent = document.getElementById('parent');
    var baby = document.createElement("baby-element");
    var inner = document.createTextNode(info.value);
    baby.appendChild(inner);
    baby.setAttribute("name",name.value);
    parent.appendChild(baby);
  });
</script>