Knockout binding 'with' an alias 'as'

Question

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>

Answer 1

正如您所演示的那样，带有as的{​​{1}}选项会创建一个您可以在子上下文中引用的持久别名。如果这就是你所需要的，那么下一个版本的Knockout（3.5.0）中会出现一个新的绑定，名为foreach。

您今天可以通过将绑定包含为自定义绑定来使用它：

let

用法：

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;

Answer 2

with不会像foreach那样迭代对象，因此别名没有$data项。您只需将对象的成员引用为顶级项目。

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