with binding re-evaluated on changes

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<ul data-bind="foreach: items">
    <li>
        <a href="#" data-bind="click: $root.selectedItem, text: name"></a>   
    </li>
</ul>

<hr/>

<div data-bind="visible: selectedItem">
    <h2 data-bind="text: 'Selected: ' + Date()"></h2>
    <!-- ko with: selectedItem -->
    <input data-bind="value: name" />
    <input data-bind="value: price" />
    <!-- /ko -->
</div>

JavaScript

var Item = function(name, price) {
   this.name = ko.observable(name);
   this.price = ko.observable(price);    
};

var ViewModel = function() {
    this.items = ko.observableArray([
        new Item("item one", 5),
        new Item("item two", 10),
        new Item("item three", 20)
    ]);
    this.selectedItem = ko.observable();
};

ko.applyBindings(new ViewModel());