Knockoutjs.com - Hello World Example
http://knockoutjs.com/examples/helloWorld.html
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<div>
<p>Title 1: <input data-bind='value: title1' /></p>
<p>Amount 1: <input data-bind='value: amount1' /></p>
<p>Title 2: <input data-bind='inputmask: { value: title2, mask: "*****" }' />
<span data-bind="validationMessage: title2"></span>
</p>
<p>Amount 2: <input data-bind='inputmask: { value: amount2, mask: "money" }' />
<span data-bind="validationMessage: amount2Numeric"></span>
</p>
</div>
JavaScript
ko.bindingHandlers.inputmask =
{
init: function (element, valueAccessor, allBindingsAccessor) {
var mask = valueAccessor();
var observable = mask.value;
if (ko.isObservable(observable)) {
$(element).on('focusout change', function () {
if ($(element).inputmask('isComplete')) {
observable($(element).val());
} else {
observable(null);
}
});
}
if (mask.mask === "money") {
$(element).inputmask('decimal',
{
'alias': 'numeric',
'groupSeparator': ',',
'autoGroup': true,
'digits': 2,
'radixPoint': ".",
'digitsOptional': false,
'allowMinus': false,
'prefix': '$ ',
'placeholder': '0'
}
);
} else {
if (mask.regex)
$(element).inputmask('Regex', { regex: mask.mask });
else
$(element).inputmask(mask.mask);
}
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var mask = valueAccessor();
var observable = mask.value;
if (ko.isObservable(observable)) {
var valuetoWrite = observable();
$(element).val(valuetoWrite);
}
}
};
var ViewModel = function() {
var self = this;
self.convertMoneyToFloat = function...