knockoutjs money
using jquery money plugin with knockout
by JasonMore
HTML
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/flaviosilveira/Jquery-Price-Format/master/jquery.price_format.js"></script>
<input type="text" data-bind="money: myMoney" />
<pre data-bind="text: ko.toJSON($data)"></pre>
JavaScript
ko.bindingHandlers.money = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
// var value = ko.utils.unwrapObservable(valueAccessor());
// $(element).val(value).maskMoney({
// symbol: '$ ',
// showSymbol: true
// });
//initialize datepicker with some optional options
var options = allBindingsAccessor().moneyOptions|| {};
$(element).priceFormat({
prefix: '$ '
});
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
debugger;
var observable = valueAccessor();
var value = $(element).unmask();
observable(value);
});
//handle disposal (if KO removes by the template binding)
//ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
// $(element).datepicker("destroy");
//});
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever the associated observable changes value.
// Update the DOM element based on the supplied values here.
// var value = ko.utils.unwrapObservable(valueAccessor());
// $(element).mask(value);
// ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
var value = ko.utils.unwrapObservable(valueAccessor());
//$(element).val(value).mask();
}
};
var viewModel = {
myMoney: 1234.55
};
ko.applyBindings(viewModel);