javascript - knockout foreach 中的自定义绑定(bind)以获取迭代器

Question

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

现在我注意到 bindingContext arg 包含 $data, $parent, $root 等但是我似乎无法找到一种方法来访问正在迭代的数组，所以有办法吗？

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

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

在这种情况下，customBinding 似乎产生了:

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

Answer 1

我不确定这是否是要走的路，但在没有进一步了解您的应用程序的情况下，这是我唯一可以建议的事情:制作一个公开完整数组的自定义 foreach 绑定(bind)。

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 属性，从其中公开整个数组。