迭代聚合物含量插入点

概述我想要的是以下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 lollipopsDavid: l 我想要的是以下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 lollipopsDavID: likes computers

现在,假设我已经正确地编写了“son”聚合物标签,并且它使用“Bob：like lolipops”作为内容呈现了一个块div.这个我可以轻松工作,所以我有类似的东西：

JohnBob: likes lolipopsDavID: 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>

解决方法 可能有几种方法可以做到这一点,但这是一种方法. ( 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>

关键部分是挂钩< father-element>的domready lifecycle method,并检查它的呃儿童.由于我们知道它们都是< son-element> s,我们只是盲目地查找它们的名称属性并将它们映射到数组,但如果你想要,你可以采取一些步骤来只查询< son-element&gt ; S. (哦,和polymer元素都需要有一个 – 在他们的名字中,所以你需要使用< father-element>(或类似代码)而不是< father&gt ;.)

总结

以上是内存溢出为你收集整理的迭代聚合物含量插入点全部内容，希望文章能够帮你解决迭代聚合物含量插入点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。