knockout won't bind to nested element

Question

I don't understand why I can successfully bind data to a particular div, but if I attempt the same exact binding to a nested element (I've tried several configurations of divs and spans), Knockout will no longer respond to any data change for the binding. I can't suss out a reason for this. Can anyone offer insight? Here are the two scenarios:

Successful binding:

<div id="header" data-bind="html: viewModel.chatInvites()"></div>

Non responsive:

<div id="header">
    <div id="chatInvitesCount" data-bind="html: viewModel.chatInvites()"></div>
</div>

The reason I need this nested structure is that I am styling the outer div as a circle with the inner div as centered text (a graphic treatment).

can you add a bit more context. How and what are you changing in your model. — Kieran
Second @Kieran, mentioned code will work fine, see this fiddle. — Jeroen
the fiddle is working for me. If i change a name it is reflected in the rendered divs at the top. Am i missing something. — Kieran
@Kieran no you're not missing anything, by "second" I meant I agree with you, that we need more info (because, as per the fiddle, the posted code would work fine) — Jeroen
ah sorry friday afternoon i did not read the name on the post — Kieran

Martin Martin · Accepted Answer · 2013-08-02T06:52:24

This should work. Do not use brakets on 'viewModel.chatInvites' cause this makes knockout to take the current value and do not update if the observable changes.

<div id="header">
    <div id="chatInvitesCount" data-bind="html: viewModel.chatInvites"></div>
</div>

knockout won't bind to nested element

1 Answers