Knockout.js: Giving initial value to observable from the HTML markup

https://groups.google.com/d/topic/knockoutjs/K-xyD1PghMk/discussion http://stackoverflow.com/questions/12125143/giving-initial-value-to-observable-from-the-html-markup

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<p>Last name: <input id="lastName" value="Junior" data-bind="valueWithInit: { value: lastName }"  /></p>
<p id="mine" data-bind="valueWithInit: { text: 'text_1' }">Initial Paragraph text</p>
<hr />
<button data-bind="click: AddClick">
Add
</button>
<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 bindings = valueAccessor();

        Object.keys(bindings).forEach(function(key) {
            var observable = bindings[key],
                binding = {};
            
            switch (key) {
                case 'value':
                    initialValue = element.value;
                    break;
                case 'text':
                    initialValue = $(element).text();
            }
            
            if (!ko.isWriteableObservable(data[observable])) {
                data[observable] = ko.observable();
            }
            data[observable](initialValue);
            
            binding[key] = data[observable];
            ko.applyBindingsToNode(element, binding, context);
        });

        
    }
};

//firstName is an existing observbale
//lastName does not exist, but is created by the binding
var viewModel = {
	self: this,
	lastName: ko.observable(''),
  AddClick: function(){
  		self.lastName += ' added Text ';
  }
};

ko.applyBindings(viewModel);