Knockout overriding input value when you haven't specified default value

https://groups.google.com/forum/?pli=1#!topic/knockoutjs/nbYHo5In0tI

by rniemeyer

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.1.2.js"></script>
<input id="messageField" type="text" value="Hello World" data-bind="value: message" />
<div>
    Message: <span data-bind="text: message"></span>
</div>
<hr />
<input type="text" value="Hello World2" data-bind="initializeValue: message2, value: message2" />
<div>
    Message2: <span data-bind="text: message2"></span>
</div>
<hr />
<input type="text" value="Hello World3" data-bind="valueWithInitialize: message3" />
<div>
    Messsage3: <span data-bind="text: message3"></span>
</div>

JavaScript

var viewModel = {
    message: ko.observable(),
    message2: ko.observable(),
    message3: ko.observable()
};

//initialize yourself BEFORE applyBindings
viewModel.message($("#messageField").val());


//custom binding to just handle initializing a value
ko.bindingHandlers.initializeValue = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
             value(element.value);   
        }
    }
};

//custom binding that wraps the value binding and does initialization
ko.bindingHandlers.valueWithInitialize = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            value(element.value);
        }    
        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
    },
    update: function(element, valueAccessor) {
        ko.bindingHandlers.value.update(element, valueAccessor);
    }
}

ko.applyBindings(viewModel);