KnockoutJS - 基本模型架构答案

【问题标题】：KnockoutJS - Basic Model ArchitectureKnockoutJS - 基本模型架构
【发布时间】：2014-07-01 00:47:13
【问题描述】：

我有一个 Web 项目，我需要对一些基本的 JavaScript 类进行建模并将它们放入一个单独的 javascript 文件中。现在我想在页面上本地使用它们并将它们添加到作为绑定对象的主视图模型中。我的问题是，你如何实现模型类和主视图模型之间的联系？

这是来自 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;
};

这里是主视图模型：

function MasterViewModel()
{
    var self = this;

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

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

我将 applyBindings 函数从这里的代码中删除。

在主视图模型中拥有属性是否正确，看起来像上面这个，还是应该是这样的

self.problem = new Namespace.Problem();

api 类的模型属性设置是否也正确？还是以下更好？

self.identifier;
self.summary;
self.title

【问题讨论】：

标签： javascript mvvm web knockout.js architecture

【解决方案1】：

首先看一下：

通常是 MainViewModel aggregates 子视图模型，并通过可观察的绑定将一个视图模型更改为另一个。

在document ready event上应用绑定最简单方便

例如：

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);
})

这里是完整的sample

【讨论】：