Question

I’m currently setting up a form in Knockout within an MVC application and displaying data from a database, such as:

@Html.EditorFor(model => model.AddressPostcode) // This is filled in from the Controller.

This is fine, as expected. However, I’ve worked a lot with Knockout JS and want this value to be used within a search of mine (and thus, data-bind="value: postcode" on this postcode element.

The problem? Well, when you bind to postcode: ko.observable(''), the pre-populated server value gets replaced with ” (as you’d expect really). Is there any way to get around this?

Answer 1

The value binding is overriding the predefined value, I think its a antipattern to use both server side MVC and client side MVVM, but if you really want to take this route you need to create your own binding like

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

        observable(value);   

        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, context);
    },
    update: ko.bindingHandlers.value.update
};