创建没有敲除代码的敲除视图模型
Creating knockout viewmodels without knockout code in them
创建一个没有任何敲除代码的敲除视图模型是否有意义?意味着根本没有可观察对象、订阅者或任何淘汰函数?
我有一些应用程序的常用功能,例如模式、闪光警报、通知、日期选择器...
我通常使用主视图模型通过其他视图模型访问它们:
var MasterModel = function(){
this.comments = new commentsViewModel().init();
this.equipment = new equipmentViewModel().init();
//fake viewmodels
this.notification = new notificationViewModel().init();
this.alert = new alertsViewModel().init();
};
var mm = new MasterModel();
ko.applyBindings(mm)
然后我可以在任何 viewModel 中使用以下内容:
mm.alert.show('Demo');
为什么我将它们保留为视图模型?它简化了事情。
- 我可以将它们保存在与视图模型相同的路径下
- 我将来可以决定对它们使用可观察的或任何淘汰功能
如果您只是想创建一种方法来减少警报或其他与 ViewModel 无关的代码重复,那么您最好只创建一个 "utility" class 具有这些辅助功能。
但是,如果你想减少代码,因为你的视图模型有很多共同点,那么我认为使用继承是更好的途径。
这是我在我的一个项目中所做的简化示例:
function baseObj(args) {
if (this instanceof baseObj === false) return new baseObj(args);
return this.memberVars(args);
}
baseObj.prototype = function() {
var defaults = {
viewOnly: false
};
function memberVars(args) {
var settings = $.extend({}, defaults, args);
var id = ko.observable();
var readOnly = ko.observable(settings.viewOnly ? true : false);
var isCreated = ko.pureComputed({
read: function() {
return id() ? true : false;
},
deferEvaluation: true
});
Object.defineProperty(this, "id", {value: id,enumerable: true});
//FYI: these are not enumerable because I don't want them to
//end up in the JSON.
Object.defineProperty(this, "readOnly", {value: readOnly});
Object.defineProperty(this, "isCreated", {value: isCreated});
return this;
}
function init(data) {
console.log("base init");
if (data) {
this.id(data.id);
}
return this;
}
function saveObj() {
console.log("saving " + this.constructor.name + "(" + this.id() + ")");
};
function deleteObj() {
console.log("deleting " + this.constructor.name+ "(" + this.id() + ")");
};
Object.defineProperty(baseObj.prototype, "memberVars", {value: memberVars});
Object.defineProperty(baseObj.prototype, "init", {value: init});
Object.defineProperty(baseObj.prototype, "saveObj", {value: saveObj});
Object.defineProperty(baseObj.prototype, "deleteObj", {value: deleteObj});
return baseObj.prototype;
}();
function personObj(args) {
if (this instanceof personObj === false) return new personObj(args);
return this.memberVars(args);
}
personObj.prototype = function setProto(base) {
function memberVars(settings) {
base.memberVars.call(this, settings);
var firstName = ko.observable("");
var lastName = ko.observable("");
var fullName = ko.pureComputed({
read: function() {
var result = "";
var tmpFirst = firstName();
var tmpLast = lastName();
if (tmpFirst)
result += tmpFirst;
if (tmpLast)
result += " " + tmpLast;
return result;
},
deferEvaluation: true
});
Object.defineProperty(this, "firstName", {value: firstName,enumerable: true});
Object.defineProperty(this, "lastName", {value: lastName});
Object.defineProperty(this, "fullName", {value: fullName});
return this;
}
function init(data) {
base.init.call(this, data);
if (data) {
this.firstName(data.firstName || "");
this.lastName(data.lastName || "");
}
}
var obj = Object.create(base);
Object.defineProperty(obj, "constructor", {value: personObj});
Object.defineProperty(obj, "memberVars", {value: memberVars});
Object.defineProperty(obj, "init", {value: init});
return obj;
}(baseObj.prototype);
创建一个没有任何敲除代码的敲除视图模型是否有意义?意味着根本没有可观察对象、订阅者或任何淘汰函数?
我有一些应用程序的常用功能,例如模式、闪光警报、通知、日期选择器...
我通常使用主视图模型通过其他视图模型访问它们:
var MasterModel = function(){
this.comments = new commentsViewModel().init();
this.equipment = new equipmentViewModel().init();
//fake viewmodels
this.notification = new notificationViewModel().init();
this.alert = new alertsViewModel().init();
};
var mm = new MasterModel();
ko.applyBindings(mm)
然后我可以在任何 viewModel 中使用以下内容:
mm.alert.show('Demo');
为什么我将它们保留为视图模型?它简化了事情。
- 我可以将它们保存在与视图模型相同的路径下
- 我将来可以决定对它们使用可观察的或任何淘汰功能
如果您只是想创建一种方法来减少警报或其他与 ViewModel 无关的代码重复,那么您最好只创建一个 "utility" class 具有这些辅助功能。
但是,如果你想减少代码,因为你的视图模型有很多共同点,那么我认为使用继承是更好的途径。
这是我在我的一个项目中所做的简化示例:
function baseObj(args) {
if (this instanceof baseObj === false) return new baseObj(args);
return this.memberVars(args);
}
baseObj.prototype = function() {
var defaults = {
viewOnly: false
};
function memberVars(args) {
var settings = $.extend({}, defaults, args);
var id = ko.observable();
var readOnly = ko.observable(settings.viewOnly ? true : false);
var isCreated = ko.pureComputed({
read: function() {
return id() ? true : false;
},
deferEvaluation: true
});
Object.defineProperty(this, "id", {value: id,enumerable: true});
//FYI: these are not enumerable because I don't want them to
//end up in the JSON.
Object.defineProperty(this, "readOnly", {value: readOnly});
Object.defineProperty(this, "isCreated", {value: isCreated});
return this;
}
function init(data) {
console.log("base init");
if (data) {
this.id(data.id);
}
return this;
}
function saveObj() {
console.log("saving " + this.constructor.name + "(" + this.id() + ")");
};
function deleteObj() {
console.log("deleting " + this.constructor.name+ "(" + this.id() + ")");
};
Object.defineProperty(baseObj.prototype, "memberVars", {value: memberVars});
Object.defineProperty(baseObj.prototype, "init", {value: init});
Object.defineProperty(baseObj.prototype, "saveObj", {value: saveObj});
Object.defineProperty(baseObj.prototype, "deleteObj", {value: deleteObj});
return baseObj.prototype;
}();
function personObj(args) {
if (this instanceof personObj === false) return new personObj(args);
return this.memberVars(args);
}
personObj.prototype = function setProto(base) {
function memberVars(settings) {
base.memberVars.call(this, settings);
var firstName = ko.observable("");
var lastName = ko.observable("");
var fullName = ko.pureComputed({
read: function() {
var result = "";
var tmpFirst = firstName();
var tmpLast = lastName();
if (tmpFirst)
result += tmpFirst;
if (tmpLast)
result += " " + tmpLast;
return result;
},
deferEvaluation: true
});
Object.defineProperty(this, "firstName", {value: firstName,enumerable: true});
Object.defineProperty(this, "lastName", {value: lastName});
Object.defineProperty(this, "fullName", {value: fullName});
return this;
}
function init(data) {
base.init.call(this, data);
if (data) {
this.firstName(data.firstName || "");
this.lastName(data.lastName || "");
}
}
var obj = Object.create(base);
Object.defineProperty(obj, "constructor", {value: personObj});
Object.defineProperty(obj, "memberVars", {value: memberVars});
Object.defineProperty(obj, "init", {value: init});
return obj;
}(baseObj.prototype);