knockout.js Bindings With


Example

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>
</div>

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)
ko.applyBindings(vm);

// 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.