KnockoutJS - 基本模型架构 [英] KnockoutJS - Basic Model Architecture
问题描述
我有一个web项目，在这里我需要建模一些基本的JavaScript类，并把它们放到一个单独的JavaScript文件。现在，我想在本地使用它们的网页上，并把它们添加到主视图模型，它充当绑定对象。我的问题是，你如何实现模型类和主视图模型之间的连接？
这是从API的类模型：
Namespace.Problem =功能（）
{
VAR自我=这一点; self.identifier = ko.observable（）;
self.summary = ko.observable（）;
self.title = ko.observable（）;
};Namespace.Problem.withJson =功能（JSON）
{
VAR问题=新Namespace.Problem（）; problem.identifier（json.identifier）;
problem.summary（json.summary）;
problem.title（json.title）; 返回的问题;
};
和这里的主人视图模型：
函数MasterViewModel（）
{
VAR自我=这一点; self.problem = ko.observable（{}）; self.loadData =功能（）
{
//通过jQuery.getJson加载数据（）;
self.problem（Namespace.Problem.withJson（JSON））;
}
}
我离开applyBindings功能了code在这里。
是不是有在主视图模型的属性，它看起来像正确的方式
这上面，还是应该像
self.problem =新Namespace.Problem（）;
在API类的模特属性设置正确的方式，也？
或者是下面的好？
self.identifier;
self.summary;
self.title
首先，采取一看：
通常，一个 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:
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
这篇关于KnockoutJS - 基本模型架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
