KnockoutJS - 基本模型架构 [英] KnockoutJS - Basic Model Architecture

问题描述

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

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?

这是来自 api 的类模型:

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

这里是主视图模型:

function MasterViewModel()
{
    var self = this;

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

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

我将 applyBindings 函数排除在此处的代码之外.

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

api 类的模型属性是否也以正确的方式设置?或者下面的更好?

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

self.identifier;
self.summary;
self.title

推荐答案

首先看一下:

• 模型视图视图模型模式
• JavaScript 模块模式
• John Papa 的单页申请

通常是 MainViewModel 聚合子视图模型和更改通过可观察绑定将一个视图模型转换为另一个视图模型.

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

在文档就绪事件

例如:

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

这是完整的示例

这篇关于KnockoutJS - 基本模型架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！