knockout templates #2

Using the “foreach” option with a named template

by RobertSudwarts

HTML

<h2>Employees</h2>
Here are the employees:
<div data-bind="template: { name: 'person-template', foreach: employees }"></div>

<script type="text/html" id="person-template">
    <h4 data-bind="text: name"></h4>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

JavaScript

function MyViewModel() {
    var self = this;
    self.employees = [ 
        { name: 'Frank', credits: 250 },
        { name: 'Bill', credits: 5800 },
        { name: 'John', credits: 5800 },
        { name: 'Fred', credits: 500 },
   ]
}
ko.applyBindings(new MyViewModel());