在 foreach 中敲除自定义绑定以获取迭代器

Question

我正在尝试创建要在 foreach 绑定中使用的自定义绑定，并且需要访问当前的 observableArray 和 $data。

现在我注意到 bindingContext arg 包含 $data, $parent, $root 等，但是我似乎找不到访问正在迭代的数组的方法，有没有办法？

为了清楚起见，这里是我的意思的一个例子：

<div data-bind="foreach: People">
   <button data-bind="customBinding: someArg">DoSomethingWithArrayAndElement</button>
</div>

在这种情况下customBinding 似乎屈服了：

• $data = 迭代中的当前元素
• $parent = 包含People 数组的视图模型
• root = 与 $parent 相同
• $index = 迭代数组中的当前索引
• $parents = 包含视图模型的数组

Answer 1

我不确定这是否可行，但如果不进一步了解您的应用，我唯一可以建议的是：创建一个自定义 foreach 绑定以公开完整数组。

ko.bindingHandlers.customForeach = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var newBindingContext = bindingContext.extend({iterator: valueAccessor()});

      return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, newBindingContext);
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var newBindingContext = bindingContext.extend({iterator: valueAccessor()});

      return ko.bindingHandlers.foreach.update(element, valueAccessor, allBindingsAccessor, viewModel, newBindingContext);
    }
  };

var ViewModel = function ViewModel() {
  this.items = ko.observableArray(['a', 'b', 'c', 'd']);
  };

ko.applyBindings( new ViewModel() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="customForeach: items">
  <li data-bind="text: $data"></li>
</ul>

这会为您的 bindingContext 添加一个新的 iterator 属性，从而从其中公开整个数组。

Answer 2

所以您的目标是让foreach 模板中的底层数组可访问？如果你问我，你不应该以这种方式建模你的代码。

话虽如此，您真正需要的只是数组的别名，并确保在使用 foreach 绑定时设置别名。当然，有很多方法可以做到这一点。

可能最简洁的方法是创建一个alias 绑定处理程序。然后扩展现有的foreach 绑定以添加别名或创建一个新别名。

ko.bindingHandlers.alias = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor();
        var aliasValue = value.data;
            aliasName = value.aliasName || '$alias';
        if (ko.isObservable(aliasValue)) {
            var rawValue = aliasValue,
                rawAliasName = value.rawAliasName || '$rawAlias';
            bindingContext[rawAliasName] = rawValue;
            aliasValue = rawValue();
        }
        bindingContext[aliasName] = aliasValue;
    }
};
ko.bindingHandlers.foreachex = {
    preprocess: function (value, name, addBinding) {
        addBinding('alias', "{ data: "+value+", aliasName: '$source', rawAliasName: '$rawSource' }");
        addBinding('foreach', value);
    }
};

然后你就可以在你的视图中使用别名了。

<div data-bind="foreachex: People">
    <!-- $rawSource is the People observable array -->
    <button data-bind="customBinding: someFunction($rawSource, $data)">
        DoSomethingWithArrayAndElement
    </button>
</div>

fiddle