I have been using knockout and am familiar with the 'foreach' binding where i can use an alias 'as':

<ul data-bind="foreach: { data: categories, as: 'category' }">
  <li>
    <ul data-bind="foreach: { data: items, as: 'item' }">
      <li>
        <span data-bind="text: category.name"></span>:
        <span data-bind="text: item"></span>
      </li>
    </ul>
  </li>
</ul>

Is there a similar thing for the 'with' binding? I have tried it with the following code but get an error:

Uncaught ReferenceError: Unable to process binding "with: function (){return { data:$root.profileUser,as:'profile'} }"

<div data-bind="with: { data: $root.profileUser, as: 'profile' }">
<form class="form-horizontal">
<div class="form-group">
  <label for="inputName" class="col-sm-2 control-label">Preferred Name</label>
  <div class="col-sm-10">
    <input type="text" data-bind="textInput: profile.PreferredName" class="form-control" id="inputName" placeholder="Preferred Name">
  </div>
</div>

I have been using knockout and am familiar with the 'foreach' binding where i can use an alias 'as':

<ul data-bind="foreach: { data: categories, as: 'category' }">
  <li>
    <ul data-bind="foreach: { data: items, as: 'item' }">
      <li>
        <span data-bind="text: category.name"></span>:
        <span data-bind="text: item"></span>
      </li>
    </ul>
  </li>
</ul>

Is there a similar thing for the 'with' binding? I have tried it with the following code but get an error:

Uncaught ReferenceError: Unable to process binding "with: function (){return { data:$root.profileUser,as:'profile'} }"

<div data-bind="with: { data: $root.profileUser, as: 'profile' }">
<form class="form-horizontal">
<div class="form-group">
  <label for="inputName" class="col-sm-2 control-label">Preferred Name</label>
  <div class="col-sm-10">
    <input type="text" data-bind="textInput: profile.PreferredName" class="form-control" id="inputName" placeholder="Preferred Name">
  </div>
</div>

• javascript
• knockout.js

• Hi, I see in the documentation that with do not have the as option like foreach, anyway share the model or one similar to the one you are using to see the hierarchy to help us reach a solution – frankfg Commented Aug 31, 2016 at 19:56

2 Answers 2

As you've demonstrated, the as option with foreach creates a persistent alias that you can reference in child contexts. If this is all you need, there's a new binding ing in the next version of Knockout (3.5.0), called let.

You can you use it today by including the binding as a custom binding:

ko.bindingHandlers['let'] = {
    init: function(element, valueAccessor, allBindings, vm, bindingContext) {
        // Make a modified binding context, with extra properties, and apply it to descendant elements
        var innerContext = bindingContext.extend(valueAccessor);
        ko.applyBindingsToDescendants(innerContext, element);

        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings['let'] = true;

Usage:

<div data-bind="let: { profile: $root.profileUser }">
...
</div>

with does not iterate over the object like foreach does, so there is no $data item to alias. You just reference the members of the object as if they were top-level items.

<div data-bind="with: $root.profileUser">
<form class="form-horizontal">
<div class="form-group">
  <label for="inputName" class="col-sm-2 control-label">Preferred Name</label>
  <div class="col-sm-10">
    <input type="text" data-bind="textInput: PreferredName" class="form-control" id="inputName" placeholder="Preferred Name">
  </div>
</div>