Knockout - template list with click to add
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<tr>
<td>
<table>
<thead>
<th>
<span>Option name:</span>
</th>
</thead>
<tbody data-bind="template: {name: 'optionChoiceTemplate', foreach: choices}"></tbody>
</table>
<button data-bind="click: function(){choices.push('new');}">Add new</button>
<br/>
<input data-bind="value: newVal"/>
<button data-bind="click: addIt">Add new</button>
</td>
</tr>
<script type="text/html" id="optionChoiceTemplate">
<div data-bind="text: $data"></div>
</script>
JavaScript
var vm = function() {
var self = this;
this.newVal;
this.choices = ko.observableArray(['red', 'blue', 'yellow']);
this.addIt = function() {
alert('Working?');
};
};
ko.applyBindings(new vm());