您绝对可以将您的视图模型分开。在该ko.applyBindings
方法中,第一个参数是视图模型,但第二个可选参数是要绑定该视图模型的 dom 元素。
我没有仔细研究过 Twitter Bootstrap,但我设置了 jsfiddle,它应该能让你站稳脚跟:http: //jsfiddle.net/JasonMore/ygT6v/10/
看法
<ul id="menu" data-bind="foreach:options">
<li data-bind="text:option"></li>
</ul>
<br/>
<section id="person">
<p>Hey, <span data-bind="text:fullName"></span>, what are you doing?</p>
<p><label>First: <input type="text" data-bind="value:firstName" /></label></p>
<p><label>Last: <input type="text" data-bind="value:lastName" /></label></p>
</section >
<br />
<section id="address">
<p>You live at: <span data-bind="text:fullAddress "></span></p>
</section >
Javascript
// main.js
var menuViewModel = {
options: ko.observableArray([
{ option: 'person'},
{ option: 'address'}
])
};
ko.applyBindings(
menuViewModel,
document.getElementById('menu')
);
// person.js
var personViewModel = new function() {
var self = this;
this.firstName = ko.observable('John');
this.lastName = ko.observable('Doe');
this.fullName = ko.computed(function() {
return self.firstName() + ' ' + self.lastName();
});
};
ko.applyBindings(
personViewModel,
document.getElementById('person')
);
// address.js
var addressViewModel = new function() {
var self = this;
this.address = ko.observable('123 main');
this.city = ko.observable('Smallville');
this.state = ko.observable('TX');
this.zip = ko.observable('12345');
this.fullAddress = ko.computed(function() {
return self.address() + ' ' + self.city() + ' ' + self.state() + ' ' + self.zip();
});
};
ko.applyBindings(
addressViewModel,
document.getElementById('address')
);