Pattern for modifying knockout observable on parent from child view model

http://stackoverflow.com/questions/10004982/pattern-for-modifying-knockout-observable-on-parent-from-child-view-model

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<ul data-bind="foreach: items">
    <li>
        <a href="#" data-bind="text: name, click: $root.selectItem"></a>
    </li>
</ul>
        
<hr/>
        
<div data-bind="with: selectedItem">
     Selected: <span data-bind="text: name"></span>        
</div>

JavaScript

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

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray([
        new Item(1, "one"),
        new Item(2, "two"),
        new Item(3, "three")
    ]);  

    this.selectedItem = ko.observable();
 
    this.selectItem = function(item) {
        self.selectedItem(item);
    };     
};

ko.applyBindings(new ViewModel());