I want to format numbers in a comma separated fashion. I have found this jsfiddle which caters to my requirement. I need to add another pureComputed
value for my vm, and I tried it with this way by modifing modified jsfiddle.
However, I'm getting an error in console saying:
Unable to process binding "text: function (){return Test }" Message: undefined is not a function
.
What am I missing here? my js is
(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);
});
Your view model definition is worng: there is no self
defined anywhere in your code.
You need to turn your viewmodel into a constructor function where you can define now the self
to point to the 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());
Demo JSFiddle.
In you want to keep the object literal as your viewmodel you need to add the computed after you've created the viewmodel:
var viewModel = {
Cash: ko.observable(1234.56)
}
viewModel.Test = ko.pureComputed(function () {
return (ViewModel.Cash() * 10).toFixed(0);
});
ko.applyBindings(viewModel);
Demo JSFiddle.
See also: Difference between knockout View Models declared as object literals vs functions