http://stackoverflow.com/questions/41901445/custom-knockout-binding-not-working

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<div>
  <h4 data-bind="text: Title"></h4>
  <input class="form-control max225" id="Phone" type="text" 
           data-bind="formatPhoneNumber: Phone" />
</div>

JavaScript

var viewModel = function(){
	var self = this;
  self.Title = ko.observable("Hello World");
  
	self.Phone = ko.observable("55555555555");
}

ko.bindingHandlers.formatPhoneNumber = {
    init: function (element, valueAccessor, allBindings) {            
      var source = valueAccessor();      
      var formatter = function(){
        return ko.computed({
          read: function(){ return source(); },
          write: function(newValue){
            source(newValue.replace(/\D+/g, "").replace(/^[01]/, "").replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3").substring(0, 12));
          }
        })
      };

      ko.bindingHandlers.value.init(element, formatter, allBindings);
    }
  };

ko.applyBindings(new viewModel());