How to extend knockout observables to read default value from binding?

Question

I have finally found the time to start learning KnockoutJS while building a new MVC4 application. I am trying to figure out the best way to initialize an observable value from a default value that is already set in the view. This is a contrived example, but I would like to render out a default value for an observable directly to the view as follows: ``` <input type="hidden" value="@Model.SomeValue" data-bind="value: myObservableReference"/> ``` I know that a default value is normally initialized via: ``` model.myObservableReference = ko.obervable("SomeValue"); ``` However, I would like to find a way to extend the initialization such that: ``` model.myObservableReference = ko.obervable(); ``` would read the existing value from the binding if a value exists. As I have so far managed to keep my KnockoutJS code completely unaware of the razor world, I want to to avoid the sloppiness of: ``` model.myObservableReference = ko.obervable(@Model.SomeValue); ``` I am guessing this would be handl…

Accepted Answer

You could try creating your own custom binding handler to achieve this:

```
ko.bindingHandlers.initializeValue = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.getAttribute('value'));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('value', ko.utils.unwrapObservable(value))
    }
};

<input type="hidden" value="@Model.SomeValue"
       data-bind="initializeValue:myObservableReference, value: myObservableReference"/>
```

How to extend knockout observables to read default value from binding?

Solution

Problem

Related problems