我有一系列从服务中回来的物品。我正在尝试为每个Item实例定义一个计算的observable,所以我的直觉告诉我把它放在原型上。
计算的observable的一种情况:系统计算点数,但用户可以选择覆盖计算的值。我需要保持计算值可用,以防用户删除覆盖。我还需要合并用户指定和计算的点,并将总计加起来。
我正在使用映射执行以下操作:
var itemsViewModel;
var items = [
{ 'PointsCalculated' : 5.1 },
{ 'PointsCalculated' : 2.37, 'PointsFromUser' : 3 }
];
var mapping = {
'Items' : {
create : function(options) {
return new Item(options.data);
}
}
};
var Item = function(data) {
var item = this;
ko.mapping.fromJS(data, mapping, item);
};
Item.prototype.Points = function () {
var item = this;
return ko.computed(function () {
// PointsFromUser may be 0, so only ignore it if the value is undefined/null
return (item.PointsFromUser != null) ? item.PointsFromUser : item.PointsCalculated;
});
};
ko.mapping.fromJS(items, mapping, itemsViewModel);
现在它的工作方式,我必须调用匿名函数来返回计算的observable。这似乎为每个绑定创建了一个计算的observable的新实例,这使得将它放在原型上的大部分内容都失败了。每次访问一个observable时,必须破译要使用多少个括号,这有点烦人。
它也有些脆弱。如果我尝试在代码中访问Points(),我就无法做到
var points = 0;
var p = item.Points;
if (p && typeof p === 'function') {
points += p();
}
因为它将Points()的上下文更改为DOMWindow而不是item。
如果我将create()中的computed放在映射中,我可以捕获上下文,但是每个对象实例上都有一个方法的副本。
我找到了Michael Best的Google网上论坛帖子(http://groups.google.com/group/knockoutjs/browse_thread/thread/8de9013fb7635b13)。原型在“激活”上返回一个新的计算观察值。我还没弄明白什么叫“激活”(也许是Objs?),但是我猜它每个对象仍然会发生一次,而且我不知道“这个”的范围是什么。
在这一点上,我相信我已经超越了已发布文档中的内容,但我仍在努力解读从源代码发生的事情。
答案 0 :(得分:7)
您提到您不希望在javascript类的每个实例上都有ko.computed
函数的实例,但是,这并不能真正解决ko的功能构建方式。当您使用ko.computed
或ko.observable
时,他们会创建内部私有变量的特定内存指针,通常不希望在类实例之间共享(尽管在极少数情况下可能会这样)。
我这样做:
var Base = function(){
var extenders = [];
this.extend = function(extender){
extenders.push(extender);
};
this.init = function(){
var self = this; // capture the class that inherits off of the 'Base' class
ko.utils.arrayForEach(extenders, function(extender){
// call each extender with the correct context to ensure all
// inheriting classes have the same functionality added by the extender
extender.call( self );
});
};
};
var MyInheritedClass = function(){
// whatever functionality you need
this.init(); // make sure this gets called
};
// add the custom base class
MyInheritedClass.prototype = new Base();
然后对于计算的observables(它必须是MyInheritedClass
的每个实例上的实例函数)我只需在extender
中声明它们就像这样:
MyInheritedClass.prototype.extend(function(){
// custom functionality that i want for each class
this.something = ko.computed(function() {
return 'test';
});
});
鉴于您的示例和上面定义的Base
类,您可以轻松地执行以下操作:
var Item = function(data) {
var item = this;
ko.mapping.fromJS(data, mapping, item);
this.init(); // make sure this gets called
};
Item.prototype = new Base();
Item.prototype.extend(function () {
var self = this;
this.Points = ko.computed(function () {
// PointsFromUser may be 0, so only ignore it if the value is undefined/null
return (self.PointsFromUser != null) ?
self.PointsFromUser : self.PointsCalculated;
});
};
然后,Item
类的所有实例都将具有Points
属性,并且它将正确处理每个实例的ko.computed
逻辑。
答案 1 :(得分:0)
Item.prototype.Points = function () {
var item = this;
return ko.computed(function () {
// PointsFromUser may be 0, so only ignore it if the value is undefined/null
return (item.PointsFromUser != null) ? item.PointsFromUser : item.PointsCalculated;
});
};
答案 2 :(得分:0)
Item.prototype.extend(function () {
var scope = this
this.Points = ko.computed(function () {
return (this.PointsFromUser != null) ?
this.PointsFromUser : this.PointsCalculated;
}, scope);
};