Dynamically bound elements with applyBindingsToNode not responding to changes

Question

In this example I have a dynamically bound input and div to the same property. But on altering text in input, changes are not reflected in the div element.

http://jsfiddle.net/rpuri/Bcps5/

ko.applyBindingsToNode(document.getElementById('input-health'), {
    value: vm.status(),
    valueUpdate: 'afterkeydown'
});

Declarative binding is not an option for me because I need to bind to shared elements in partial views (ASP.NET MVC).

Thanks

Answer 1

You are binding to the value of the observable instead of the observable itself.

Try:

ko.applyBindingsToNode(document.getElementById('health'), {
    text: vm.status, // <- not invoking status, binding to the observable itself.
    valueUpdate: 'keydown'
});

ko.applyBindingsToNode(document.getElementById('input-health'), {
    value: vm.status,  
    valueUpdate: 'keydown'
});

http://jsfiddle.net/hwQsm/