JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/kmalakoff/knockback/0.20.4/knockback-full-stack.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-relational/0.8.5/backbone-relational.js"></script>
<div id="a-section">
<p data-bind="text: someComputed"></p>
</div>
<div id="another-section">
<p data-bind="text: foo()"></p>
</div>
JavaScript
var aModel = new Backbone.Model();
var ViewModel1 = kb.ViewModel.extend({
constructor: function (theModel) {
var self = this;
self.foo = kb.observable(theModel, 'foo');
self.bla = kb.observable(theModel, 'sdf');
self.someComputed = ko.computed(function () {
var currectFoo = self.foo();
return currectFoo +5;
});
self.someComputed.subscribe(function (pages) {
console.log("some code");
self.bla("dsf");
});
}
});
var ViewModel2 = kb.ViewModel.extend({
constructor: function (theModel) {
this.foo = kb.observable(theModel, 'foo');
}
});
var view_model1 = new ViewModel1(aModel);
ko.applyBindings(view_model1, $('#a-section')[0]);
var view_model2 = new ViewModel2(aModel);
ko.applyBindings(view_model2, $('#another-section')[0]);
view_model1.foo(234);
view_model2.foo(123);
view_model2.foo(321);