Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by suhail

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(moneyVal) {
    return $.isNumeric(moneyVal) ? moneyVal : parseFloat(moneyVal.replace(/[^\.\d]/g, ""));
  }

  self.title1 = ko.observable("T1").extend({
    maxLength: 5
  });
  self.title1.subscribe(function(newValue) {
    console.log("AJAX write T1 " + newValue);
  });
  self.amount1 = ko.observable(110.0).extend({
    number: true,
    min: 10.0,
    max: 10000.0
  });
  self.amount1.subscribe(function(newValue) {
    console.log("AJAX write A1 " + newValue);
  });
  self.title2 = ko.observable("T2").extend({
    maxLength: 5
  });
  self.title2.subscribe(function(newValue) {
    console.log("AJAX write T2 " + newValue);
  });
  self.amount2 = ko.observable(110.0);
 ...