将KnockoutJS与多个页面一起使用

问题描述

我刚刚开始学习KnockoutJS.我感到困惑的一件事是，样本似乎都集中在具有单个视图模型的单个视图上.大型应用程序如何运作?

I'm just getting started with learning KnockoutJS. One thing that I'm confused about, the samples seemed to all be focused on a single view with a single viewmodel. How do things work with a larger application?

我将要编写一个纯HTML/jquery应用程序.所有数据都通过ajax作为json提供.应用程序顶部有一个通用的导航标题，其中包含使用Twitter Bootstrap实现的多个选项卡和子选项卡.

I am going to be writing a pure html/jquery application. All data is served up as json via ajax. There is a common navigation header at the top of the application with multiple tabs and subtabs implemented with Twitter Bootstrap.

如果我将应用程序的每个页面都构建为单独的html视图和js视图模型，那么如何维护一个统一的标头?如果这是服务器端的asp.net网络表单，我将使用母版页.但这都是客户端.

If I build each page of the application as a separate html view and js viewmodel, how do I maintain a single unified header? If this was server side asp.net webforms, I would use Master Pages for this. But this is all client side.

在淘汰赛中是否有可以解决这个问题的东西?还是另一个可以解决此特定问题的库?

Is there something in Knockout that handles this? Or perhaps another library that solves this particular problem?

我想我可以在一个大的html页面中编写该应用程序，但是它会很大.必须有更好的方法.

I suppose I could write the app in one big html page, but it would be rather large. There has to be a better way.

推荐答案

您可以明确地将视图模型分开.在ko.applyBindings方法中，第一个参数是viewmodel，但是第二个可选参数是将该视图模型绑定到的dom元素.

You can definately have your viewmodels separate. In the ko.applyBindings method, the first parameter is the viewmodel, but the second optional parameter is the dom element to bind that view model to.

我还没有仔细看过Twitter Bootstrap，但是我设置了jsfiddle，它应该让您右手起步: http://jsfiddle.net/JasonMore/ygT6v/10/

I have not looked closely at Twitter Bootstrap, but I setup jsfiddle that should get you off on the right foot: 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')
);
​

这篇关于将KnockoutJS与多个页面一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！