javascript - Knockout 中的可重用计算字段

Question

我有一个使用映射插件的 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        
});

不要太担心代码的作用，我更关心模式。如您所见，formattedGiftAmount() 和 formattedGoal() 这两个属性具有几乎相同的定义它们的对象。唯一的区别是它们修改的属性。我可能会有更多这样的实例，所以我想知道是否有任何方法可以使它更具可重用性。我可以想象做类似 this[prop]() 的事情，但我不太清楚如何将它注入(inject)对象并让它工作。

PS:我看过this但它仍然不能完全满足我的要求。

Answer 1

您也可以modify fn向你的 ko.observable 添加一个函数来创建它，这将允许你以描述性的方式在你的构造函数中添加属性(fiddle):

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();
};