javascript - KnockoutJS - 基本模型架构

Question

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

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

Answer 1

首先看一下:

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

通常是 MainViewModel aggregates subview 模型并通过可观察绑定(bind)将一个 View 模型更改为另一个 View 模型。

在文档就绪事件上应用绑定(bind)是最简单和方便的方法

例如:

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