Data binding does not work after simple modal popup

Question

Please consider the following code (also in this fiddle):

var viewModel = {
    count:ko.observable(0),
    add:function (){
    this.count(this.count()+1);
        },
    popup:function (){
    $.modal($("#divPopup"));
    }
}

ko.applyBindings(viewModel);

And this corresponding View:

<button id="btnAdd" data-bind="click:add">Add</button>
<button id="btnPopup" data-bind="click:popup">Popup</button>
<div id="divPopup">
    <span data-bind="text:count"></span>
</div>

Now:

1. click Add button
2. click Popup button
3. click top right corner of modal window (sorry I can't have "x" image)
4. Add button don't work

I can't use:

$.modal($("#divPopup").html());

Because in my app html does not render when $.modal().

Or to put it as another question: how I can know when html render was completed when my viewModel changed?

Answer 1

Try passing persist: true in for the options to modal() like:

$("#divPopup").modal({ persist: true });

http://jsfiddle.net/rniemeyer/BxVF9/