首先，采取一看：

• 模型 - 视图 - 视图模型模式


• 的JavaScript模块模式


• 由约翰·帕帕单页应用

通常，一个 MainViewModel 聚合子视图模型，并改变一个视图模型到另一个直通观察到的结合。

该easest方式，更方便也适用于文档准备事件结合

例如：

  viewModelFactory =功能（）{
    功能MainViewModel（）{
        VAR自我=这一点;        self.items = ko.observableArray（[
            新第1页（）
            新的第2页（）
        ]）;
        self.selectedPage = ko.observable（self.items（）[0]）;
        self.onSelected =功能（页）{
            self.selectedPage（页）;
        };
    }    功能PageViewModel（TEMPLATENAME，LINKNAME）{
        VAR自我=这一点;
        self.templateName = TEMPLATENAME;
        self.linkName = LINKNAME;
    }    功能第1页（）{
        VAR自我=这一点;
        $ .extend（个体经营，新PageViewModel（'的template1'，'第一页'））;
        self.data这样='blablabla-blablabla';
    }    第二页功能（）{
        VAR自我=这一点;
        $ .extend（个体经营，新PageViewModel（'则Template2'，'第二页'））;        self.people = [
            {名称：'保罗'，年龄：18，性别：男性}，
            {名称：'约翰'，年龄：25，性别：男性}，
        ];
    }    返回{
        创建：函数（）{
            返回新MainViewModel（）;
        }
    };
}（）;$（函数（）{
    变种mainViewModel = viewModelFactory.create（）;
    ko.applyBindings（mainViewModel）;
}）
 

下面是完整的样品

I've got a web project, where I need to model some basic JavaScript classes and put them into a separate javascript file. Now I want to use them locally on a page and add them into a master view model, which acts as binding object. My question is, how do you realize the connections between model class and master view model?

This is the class model from the api:

Namespace.Problem = function()
{
    var self = this;

    self.identifier = ko.observable();
    self.summary = ko.observable();
    self.title = ko.observable();
};

Namespace.Problem.withJson = function(json)
{
    var problem = new Namespace.Problem();

    problem.identifier(json.identifier);
    problem.summary(json.summary);
    problem.title(json.title);

    return problem;
};

and here the master view model:

function MasterViewModel()
{
    var self = this;

    self.problem = ko.observable({});

    self.loadData = function()
    {
        // Load data via jQuery.getJson();
        self.problem(Namespace.Problem.withJson(json));
    }
}

I leave the applyBindings function out of the code here.

Is it the right way to have an attribute in the master view model, which looks like this above, or should it be like

self.problem = new Namespace.Problem();

Are the model properties of the api class set the right way, too? Or is the following better?

self.identifier;
self.summary;
self.title

First of all, take a look on:

• Model View ViewModel pattern
• JavaScript Module Pattern
• Single page application by John Papa

Often a MainViewModel aggregates child view models and changes one view model to another thru observable binding.

The easest way and more convenient do apply binding on document ready event

For example:

viewModelFactory = function() {
    function MainViewModel(){
        var self = this;

        self.items = ko.observableArray([
            new Page1(),
            new Page2()
        ]);
        self.selectedPage = ko.observable(self.items()[0]);
        self.onSelected = function(page){
            self.selectedPage(page);       
        };
    }

    function PageViewModel(templateName, linkName){
        var self = this;
        self.templateName = templateName;
        self.linkName = linkName;
    }

    function Page1(){
        var self = this;
        $.extend(self, new PageViewModel('template1', 'Page1'));        
        self.data = 'blablabla-blablabla';
    }

    function Page2(){
        var self = this;
        $.extend(self, new PageViewModel('template2', 'Page2'));

        self.people = [
            { name: 'Paul', age: 18, gender: 'male' },
            { name: 'John', age: 25, gender: 'male' },
        ];
    }

    return {
        create: function(){
            return new MainViewModel();
        }
    };
}();

$(function(){
    var mainViewModel = viewModelFactory.create();
    ko.applyBindings(mainViewModel);
})

Here's full sample