使用pureComputed进行货币格式化

时间:2014-12-15 07:14:04

标签: knockout.js custom-binding

我想以逗号分隔的方式格式化数字。我发现这jsfiddle符合我的要求。我需要为我的虚拟机添加另一个pureComputed值,我通过修改modified jsfiddle以这种方式尝试了它。

但是,我在控制台中收到错误说:

  

Unable to process binding "text: function (){return Test }" Message: undefined is not a function

我在这里缺少什么?我的js是

(function ($) {
var cleanInput = function (value) {
    return parseFloat(value.replace(/[^0-9.-]/, ''));
}

var formatInput = function (value) {
    toks = value.toFixed(2).replace('-', '').split('.');
    var display = $.map(toks[0].split('').reverse(), function (elm, i) {
        return [(i % 3 == 0 && i > 0 ? ',' : ''), elm];
    }).reverse().join('') + '.' + toks[1];

    return value < 0 ? '(' + display + ')' : display;
}

ko.bindingHandlers.money = {
    init: function (elm, valueAccessor) {
        $(elm).change(function () {
            valueAccessor()(cleanInput(elm.value));
        }).addClass('money');
    },
    update: function (elm, valueAccessor, allBindingsAccessor) {
        var value =ko.utils.unwrapObservable(valueAccessor())
        $elm = $(elm),
        method = $elm.is(":input") ? "val" : "html";

        $elm[method](formatInput(value)).toggleClass('negative', value < 0);
    }
};})(jQuery);


$(function(){
var viewModel={
    Cash:ko.observable(1234.56),
    Test : ko.pureComputed(function() {
        return (self.Cash() * 10).toFixed(0);
    })
}
ko.applyBindings(viewModel);

});

1 个答案:

答案 0 :(得分:1)

您的视图模型定义很有用:代码中的任何位置都没有定义self

您需要将viewmodel转换为构造函数,您可以在其中定义self以指向this

var ViewModel = function() {
    var self = this;
    self.Cash = ko.observable(1234.56);
    self.Test = ko.pureComputed(function() {
        return (self.Cash() * 10).toFixed(0);
    });
}
ko.applyBindings(new ViewModel());

演示JSFiddle

如果您希望将对象文字保留为viewmodel,则需要在创建视图模型后添加计算:

var viewModel = {
    Cash: ko.observable(1234.56)
}
viewModel.Test = ko.pureComputed(function () {
    return (ViewModel.Cash() * 10).toFixed(0);
});
ko.applyBindings(viewModel);

演示JSFiddle

另请参阅:Difference between knockout View Models declared as object literals vs functions