knockout.js Bindings With


The with binding binds the HTML inside the bound node to a separate context:

<div data-bind="with: subViewModel">
  <p data-bind="text: title"></p>

The with binding may also be used without a container element where a container element may not be appropriate.

<!-- ko with: subViewModel -->
  <p data-bind="text: title"></p>
<!-- /ko -->
var vm = {
  subViewModel: ko.observable()

// Doesn't throw an error on the `text: title`; the `<p>` element 
// isn't bound to any context (and even removed from the DOM)

// Includes the `<p>` element and binds it to our new object
vm.subViewModel({ title: "SubViewModel" });

The with binding has many similarities to the template or foreach bindings.