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>

  <label>Raw value: </label><span data-bind="text: Phone"></span>
  <br/>  <br/>
  <label>Formatted: </label>
  <input class="form-control max225" id="Phone" type="text" 
           data-bind="formatPhone: Phone" />
</div>

JavaScript

var model = { MainPhone: '5555555555' };

var viewModel = function(){
	var self = this;
  self.Title = ko.observable("Hello World"); 
    
  self.Phone = ko.observable(model.MainPhone ? model.MainPhone : "");
}

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

        ko.applyBindingAccessorsToNode(element, { value: formatter }, context);
    }
}

ko.applyBindings(new viewModel());