How do I add html to an emberjs template? - templates

Question

If I start with the following:
<script type="text/x-handlebars" id="Parent">
<p>Name: {{input type="text" value=name}}</p>
<button {{action 'addChild'}}>Add Child</button>
</script>
I would like clicking the button to produce the following:
<script type="text/x-handlebars" id="Parent">
<p>Name: {{input type="text" value=name}}</p>
<p>Child1 Name: {{input type="text" value=child1_name}}</p>
...
...
...
<p>Childn Name: {{input type="text" value=childn_name}}</p>
<button {{action 'addChild'}}>Add Child</button>
</script>
Thanks.

Answer 1

You want to put the html you're looking to add into the template, but within a looping construct - in this case {{#each}}. The loop will iterate over an array of children that you keep track of. Whenever you add an object to your children array, Ember will re-render the loop and therefor add the html for you. Your template will look like this:
<script type="text/x-handlebars">
<p>Name: {{input type="text" value=name}}</p>
{{#each child in children}}
<p>{{child.name}}: {{input type="text" value=child.value}}</p>
{{/each}}
<button {{action 'addChild'}}>Add Child</button>
</script>
You want to handle the addChild action so that it adds an object into your children array. You can do this in the Controller like so:
App.ApplicationController = Ember.Controller.extend({
name: 'Parent Name',
children: [],
actions: {
addChild: function() {
var children = this.get('children');
var id = children.length + 1;
children.addObject({
name: 'Child Name ' + id,
value: id
});
}
}
});
Here is a functional JSBin that you can experiment with: http://emberjs.jsbin.com/gujomizici/1/edit?html,js,output