A simple global 2 viewmodel coupling

Containing a global array subscribables.items

by Asle Gundersby

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div style="border:1px solid red;" id="items1">
    <input data-bind="value: myname"/>
    <span data-bind="text: myname"></span>
    <button data-bind="click: addItem">Add Item</button>
    <ul data-bind="foreach: items">
        <li data-bind="text:$data"></li>
    </ul>
</div>
<div style="border:1px solid blue;" id="items2">
    <span data-bind="text: myname"></span>
    <ul data-bind="foreach: items">
        <li data-bind="text:$data"></li>
    </ul>
</div>

JavaScript

subscribables = {
    myname: ko.observable(),
    items: ko.observableArray(),
    projects: ko.observableArray(),
    users: ko.observableArray()
};
$(function() {

var model1 = function() {
    var self = this;
   
    (self.myname = subscribables.myname)("Asle");
    self.myname = subscribables.myname;
    self.items = subscribables.items;
    self.users = subscribables.users;
    self.users.push(self.myname);
    
    // actions
    self.addItem = function() {
        self.items.push("boo");
    };
   
};
var model2 = function() {

    var self = this;
    //(self.items = subscribables.items)(["Initial Item 1"]);
    //the above is equivalent to the following to lines...
    self.items = subscribables.items;
    self.items(["Initial Item 1"]);
    
    self.myname = subscribables.myname;
};
ko.applyBindings(new model1(), document.getElementById("items1"));
ko.applyBindings(new model2(), document.getElementById("items2"));


});