我的视图模型开始变得非常大,所以我决定将其拆分为多个文件。我已经尝试了很多不同的方法但没有任何工作。
我的视图模型如下:
namespace.model = function(constructorParam) {
var self = this;
self.param1 = ko.observable(constructorParam.param1);
self.param2 = ko.observable(privateFunction(constructorParam));
self.clickEvent = function() {
// do something with params
// call some private funcitons
privateFunction2(self.param2);
};
function privateFunction(param) {
// do some stuff
}
function privateFunction2(param) {
// do some stuff
}
};
我需要跨多个文件访问私有函数和可观察参数。我的最终模型应如下所示:
// file 1
// contains constructor and param initialization + many common private helper funcitons
namespace.model = function(constructorParam) {
var self = this;
self.param1 = ko.observable(constructorParam.param1);
self.param2 = ko.observable(privateFunction(constructorParam));
function privateFunction(param) {
// do some stuff
}
function privateFunction2(param) {
// do some stuff
}
};
// file 2
// contains event hendlers
self.clickEvent = function () {
// i need to acces properties from namespace.model
self.param1
// call some private funcitons
privateFunction2(self.param2);
};
// view model initialization
ko.applyBindings(new namespace.model(initValues));
是否有可能通过淘汰赛实现这样的目标? 谢谢
答案 0 :(得分:5)
我会看一下像RequireJS这样的库,它可以用来将你的viewmodel拆分成不同的'modules',然后加载到你的主ViewModel中。
在Knockout网站here上有一些非常简单的使用RequireJS和Knockout的例子。
看看John Papa撰写单页应用here的一些非常有用的帖子。
答案 1 :(得分:5)
最后,我找到了一种方法here。 这是一个完整的例子:
<div>
Name: <input data-bind="value: name" type="text" /> <br />
Surname: <input data-bind="value: surname" type="text" /><br />
Fullname: <span data-bind="text: fullName"></span><br />
<button data-bind="click: showName">Show Name</button>
</div>
<script>
Function.prototype.computed = function () {
this.isComputed = true;
return this;
};
Object.prototype.makeComputeds = function () {
for (var prop in this) {
if (this[prop] && this[prop].isComputed) {
this[prop] = ko.computed(this[prop], this, { deferEvaluation: true });
}
}
};
// file 1
var namespace = namespace || {};
namespace.model = function (params)
{
var self = this;
self.name = ko.observable(params.name);
self.surname = ko.observable(params.surname);
self.makeComputeds();
};
// file 2
(function () {
function showFullName(fullName) {
alert(fullName);
}
ko.utils.extend(namespace.model.prototype, {
showName: function() {
showFullName(this.fullName());
},
// computed observable
fullName: function() {
return this.name() + " " + this.surname();
}.computed()
});
})();
ko.applyBindings(new namespace.model({ name: "My Name", surname: "My Surname" }));
</script>
修改强>
有一个名为Durandal的项目,它结合了RequireJS和KnockoutJS。值得一看,如果您对KnockoutJS的SPA架构最佳实践感兴趣。