Iterating through polymer content insertion points - polymer

Question

What I'd like is for the following html:
<father name = "John">
<son name = "Bob">likes lollipops</son>
<son name = "David">likes computers</son>
</father>
to generate:
John has two sons, Bob and David:
Bob: likes lollipops
David: likes computers
Now, assume I've correctly written the "son" polymer tag, and it renders a block div with "Bob: likes lolipops" as the contents. this I can get working easily, so that I have something like:
John
Bob: likes lolipops
David: likes computers
However, to get that top line, I'm really not sure what the correct approach is, basically I'd like something like this:
<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

There are probably a few ways of doing this, but here's one approach. (Full version on 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>
The key piece is hooking into the domReady lifecycle method of <father-element>, and inspecting its, erm, children. Since we know they'll all be <son-element>s, we just blindly look for their name attributes and map them to an array, but if you wanted you could take some steps to only query for the <son-element>s.
(Oh, and Polymer elements all need to have a - in their names, so you'd need to go with <father-element> (or the like) instead of <father>.)

Answer 2

This is my solution, it is based on Jeff Posnick's solution but with Scott Miles suggestion to listen for add- remove- events.
<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>
I did not manage to get the parent-element to recalculateBabys if the baby is removed from outside, with for instance document.getElementsByTagName('baby-element')[0].remove().
I would have liked to (on the baby-element) only have the attached and detached methods fire the baby-added and baby-removed events, and the killBaby-funktion to only do 'this.remove()'.
But I could never get the Parent to hear all those events...
Please feel free to scrutinize this code and tell me any errors, I am kind of new to Polymer, but I still hop I can contribute!