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.