在多个页面中使用 KnockoutJS [英] Using KnockoutJS with multiple pages

问题描述

我刚刚开始学习 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 webforms，我会为此使用母版页.但这都是客户端.

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.

Knockout 中有什么东西可以处理这个问题吗?或者也许是另一个解决这个特定问题的库?

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 方法中，第一个参数是视图模型，但第二个可选参数是将视图模型绑定到的 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！