passing variables to a knockout template

by John Allan

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script type="text/html" id="list">
  <ul data-bind="foreach: items">
    <li data-bind="text: name + ' ' + time, visible: $parent.itemType == isVisible"></li>
  </ul>
</script>

<h2>Should be visible</h2>
<div data-bind="template: {name: 'list', data: { items: items, itemType: true } }"></div>

<h2>Should not be visible</h2>
<div data-bind="template: {name: 'list', data: { items: items, itemType: false } }"></div>

<a href='#' data-bind="click: addItem">add</a>

JavaScript

function viewModel() {
    var self = this;
    
    self.items = ko.observableArray([
        { name: "one", time: new Date().getTime(), isVisible: true },
        { name: "two", time: new Date().getTime(), isVisible: true },
        { name: "three", time: new Date().getTime(), isVisible: false }
    ]);
    
    self.addItem = function() {
       self.items.push({ name: "new", time: new Date().getTime(), isVisible: true });            
    };
}

ko.applyBindings(new viewModel());