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

I'm using KnockoutJS and have a main view and view model. I want a dialog (the jQuery UI one) to popup with another view which a separate child view model to be bound to.

The HTML for the dialog content is retrieved using AJAX so I want to be able to call ko.applyBindings once the request has completed, and I want to bind the child view model to just the portion of the HTML loaded via ajax inside the dialog div.

Is this actually possible or do I need to load ALL my views and view models when the page initially loads and then call ko.applyBindings once?

This question is related to ajax html knockout.js

The answer is

You should look at the with binding, as well as controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

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]);

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

  <input data-bind="value: VMA.name" />

  <input data-bind="value: VMB.name" />

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}


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

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

Examples related to ajax

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to knockout.js

json parsing error syntax error unexpected end of input Javascript Equivalent to C# LINQ Select KnockoutJs v2.3.0 : Error You cannot apply bindings multiple times to the same element Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.." twitter bootstrap autocomplete dropdown / combobox with Knockoutjs Change event on select with knockout binding, how can I know if it is a real change? How to clear/remove observable bindings in Knockout.js? Passing parameter using onclick or a click binding with KnockoutJS Knockout validation How to force a view refresh without having it trigger automatically from an observable?