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]() ，但是我無法弄清楚如何將它注入到對象中並使其工作。

PS：我已經看過這個，但它仍然不能完全滿足我的需求。

Answer 1

您還可以修改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();
};

Answer 2

您可以向視圖模型添加一個函數，該函數基於未格式化的屬性創建格式化屬性：

myViewModel.addFormattedProperty = function(formattedName, unformattedName) {
    this[formattedName] = ko.computed({
        read: function() {
            return parseInt(this[unformattedName](), 10).formatMoney();                        
        },
        write: function(value) {
            this[unformattedName](value.unformatMoney());

        },
        owner: this
    });
};

然后你可以為你的房產調用它：

myViewModel.addFormattedProperty('formattedGiftAmount', 'giftAmount');
myViewModel.addFormattedProperty('formattedGoalAmount', 'goalAmount');