Demonstrating that valueWithInit isn't document-wide declarative

https://groups.google.com/d/topic/knockoutjs/K-xyD1PghMk/discussion

by joeyespo

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<!-- ADDITION BY JOEYESPO -->
<p>First name (this is fine; it's defined in the view-model): <input id="firstNameBeforeInit" value="Reinaldo" data-bind="value: firstName"  /></p>
<p>Last name (won't work; it's defined by valueWithInit): <input id="lastNameBeforeInit" data-bind="value: lastName"  /></p>
<!-- END ADDITION -->

<p>First name: <input id="firstName" value="Reinaldo" data-bind="valueWithInit: 'firstName'"  /></p>
<p>Last name: <input id="lastName" value="Junior" data-bind="valueWithInit: 'lastName'"  /></p>

<hr />

<pre data-bind="text: ko.toJSON(viewModel, null, 2)"></pre>

CSS

input { margin: 2px; }

JavaScript

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data, context) {
        var property = valueAccessor(),
            value = element.value;

        //create the observable, if it doesn't exist 
        if (!ko.isWriteableObservable(data[property])) {
            data[property] = ko.observable();
        }
        
        data[property](value);
        
        ko.applyBindingsToNode(element, { value: data[property] }, context);
    }
};

//firstName is an existing observbale
//lastName does not exist, but is created by the binding
var viewModel = {
    firstName: ko.observable("")
};

ko.applyBindings(viewModel);