Knockout中可重用的计算字段

Jas*_*son 2 javascript mvvm knockout.js computed-observable

我有一个使用映射插件的Knockout Viewmodel.映射JSON对象后,我创建了一些计算值,如下所示:

/* viewmodel setup and mapping */

myViewModel
    .formattedGiftAmount = ko.computed({
        read: function () {
            return parseInt(this.giftAmount(), 10).formatMoney();                        
        }
        , write: function (value) {                        
            this.giftAmount(value.unformatMoney());
        }
        , owner: this        
    })
    .formattedGoal = ko.computed({
        read: function () {
            return parseInt(this.goalAmount(), 10).formatMoney();                        
        }
        , write: function (value) {                        
            this.goalAmount(value.unformatMoney());
        }
        , owner: this        
});
Run Code Online (Sandbox Code Playgroud)

不要太担心代码的作用,我更关心模式.正如你所看到的,这两个属性formattedGiftAmount(),并formattedGoal()具有定义它们几乎相同的对象.唯一的区别是他们修改了哪些属性.我可能会有更多像这样的实例,所以我想知道是否有任何方法可以使它更可重用.我可以想象做类似的事情this[prop](),但我无法弄清楚如何将其注入对象并使其工作.

PS:我已经看过这个,但它仍然不能完全满足我的需求.

Jas*_*aat 7

您还可以修改fn以向ko.observable添加一个函数来创建它,这将允许您以描述性方式(小提琴)在构造函数中添加属性:

ko.observable.fn.formatAsMoney = function() {
    var base = this;
    return ko.computed({
        read: function() {
            return formatMoney(parseFloat(base()));
        },
        write: function(newValue) {
            base(unformatMoney(newValue));
        }
    });
};

function ViewModel() {
    var self = this;
    self.number = ko.observable(10.5);
    self.money = self.number.formatAsMoney();
};
Run Code Online (Sandbox Code Playgroud)