Question

我有一个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

Answer 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

KnockoutJS - 基本模型架构

1 个答案: