Question

我想要的是以下html：

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

生成：

John has two sons, Bob and David:

Bob: likes lollipops
David: likes computers

现在，假设我已经正确地写了“儿子”聚合物标签，并且它以“Bob：likes lolipops”作为内容呈现了一个块div。这个我可以轻松工作，所以我有类似的东西：

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>

Answer 1

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

<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>

关键部分是挂在domReady的{{1}} lifecycle method，并检查它，嗯，<father-element>。由于我们知道它们都是children，我们只是盲目地查找它们的名称属性并将它们映射到数组，但是如果你想要，你可以采取一些步骤来仅查询{{1} }第

（哦，聚合物元素的名称都需要<son-element>，因此您需要使用<son-element>（或类似代码）代替- 。）

Answer 2

这是我的解决方案，它基于Jeff Posnick的解决方案，但Scott Miles建议听取add-remove-事件。

<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>

如果婴儿从外面被移除，我没有设法让父元素重新计算宝宝，例如document.getElementsByTagName('baby-element')[0].remove()。

我本来希望（在婴儿元素上）只有附加和分离的方法可以解雇婴儿添加和婴儿删除的事件，而killBaby-funktion只能执行此操作。删除（）＆＃39 ;. 但我永远不会让家长听到所有这些事件......

请随意仔细检查这段代码并告诉我任何错误，我对Polymer来说是个新手，但我仍然可以参与其中！

迭代聚合物含量插入点

2 个答案: