Can you call ko.applyBindings to bind a partial view?

ko.applyBindings accepts a second parameter that is a DOM element to use as the root.

This would let you do something like:

<div id="one">  <input data-bind="value: name" /></div><div id="two">  <input data-bind="value: name" /></div><script type="text/javascript">  var viewModelA = {     name: ko.observable("Bob")  };  var viewModelB = {     name: ko.observable("Ted")  };  ko.applyBindings(viewModelA, document.getElementById("one"));  ko.applyBindings(viewModelB, document.getElementById("two"));</script>

So, you can use this technique to bind a viewModel to the dynamic content that you load into your dialog. Overall, you just want to be careful not to call applyBindings multiple times on the same elements, as you will get multiple event handlers attached.

While Niemeyer's answer is a more correct answer to the question, you could also do the following:

<div>  <input data-bind="value: VMA.name" /></div><div>  <input data-bind="value: VMB.name" /></div><script type="text/javascript">  var viewModels = {     VMA: {name: ko.observable("Bob")},     VMB: {name: ko.observable("Ted")}  };  ko.applyBindings(viewModels);</script>

This means you don't have to specify the DOM element, and you can even bind multiple models to the same element, like this:

<div>  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" /></div>

I've managed to bind a custom model to an element at runtime. The code is here: http://jsfiddle.net/ZiglioNZ/tzD4T/457/

The interesting bit is that I apply the data-bind attribute to an element I didn't define:

    var handle = slider.slider().find(".ui-slider-handle").first();    $(handle).attr("data-bind", "tooltip: viewModel.value");    ko.applyBindings(viewModel.value, $(handle)[0]);