将基因剔除视图模型拆分为多个文件 [英] Splitting knockout view model into multiple files
问题描述
我的视图模型开始变得很大,因此我决定将其拆分为多个文件.我已经尝试了许多不同的方法,但是没有任何效果.
My view model started getting very large so I decided to split it into multiple files. I have already tried many different approaches but nothing was working.
我的视图模型如下:
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
}
};
我需要跨多个文件访问私有函数和可观察的参数.我的最终模型应如下所示:
I need to access private functions and observable parameters across multiple files. My final model should look like this:
// 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));
是否可以通过淘汰赛实现类似目标? 谢谢
Is it possible to achieve something like this with knockout? Thanks
推荐答案
Finally I've found a way how to do it here. Here is a complete example:
<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架构最佳实践感兴趣.
There is a project called Durandal which combines RequireJS and KnockoutJS. Worth to look if you are interested in SPA architecture best practices for KnockoutJS.
这篇关于将基因剔除视图模型拆分为多个文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!