Question

Ive created a function which returns all the obserables items in my html page. An exmaple of this function is

<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer2" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer3" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer4" class="InputText"/>

The function would reutrn [‘AOfficer’,’AOfficer2′,’AOfficer3′,’AOfficer4′]

And now i want to be make the above list of data-bind elemnts obserable

viewModel = {
AOfficer : ko.observable(),
AOfficer2 : ko.observable(),
AOfficer3 : ko.observable(),
AOfficer4 : ko.observable(),
}
ko.applyBindings(viewModel);

Above is the un-dynamic way of doing this.. But i just cant seem to find a dynamic way to solve this problem..

How would i go about solving this? Is there a solution? A work around?

Thanks guys

Answer 1

One option that I have used in the past is to create a custom binding that will populate the view model for you from the existing value.

Something like:

ko.bindingHandlers.valueWithInit = {
    init: function(element, valueAccessor, allBindingsAccessor, data) {
        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] });

    }
};

When you add the binding, you need to specify the property name as a string, so that the binding does not fail when it does not initially exist.

This method will create an observable for you, if it does not exist or simply populate an existing observable with the element’s value.

Sample here: http://jsfiddle.net/rniemeyer/BnDh6/