在不知道名称的情况下获取foreach绑定内的集合参考

时间:2016-07-11 08:16:39

标签: knockout.js

鉴于以下示例,我将父集合(source: $parent.myThing.children)传递给自定义绑定。我想知道上下文中是否有任何内容告诉我父集合在不知道名称的情况下是什么?

<div data-bind="foreach: myThing.children">
    <button data-bind="arrayMoveUp: { item: $data, source: $parent.myThing.children }">
        <i class="fa fa-arrow-up"></i> Up
    </button>
    <button data-bind="arrayMoveDown: { item: $data, source: $parent.myThing.children }">
        <i class="fa fa-arrow-down"></i> Down
    </button>
</div>
例如,我希望能够做source: $source之类的事情,然后传递foreach绑定的内容。

1 个答案:

答案 0 :(得分:2)

我不认为默认情况下可以访问它。您可以创建自定义扩展foreach绑定,将其添加到bindingContext但是......

ko.bindingHandlers.customForEach = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.utils.extend(bindingContext, {
      '$arraySource': ko.unwrap(valueAccessor())
    });

    return ko.bindingHandlers.foreach.init.apply(null, arguments);
  },
  update: function() {
    return ko.bindingHandlers.foreach.update.apply(null, arguments);
  }
};


ko.applyBindings({
  items: [1, 2, 3, 4, 5, 6]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="customForEach: items">
  <li>
    <span data-bind="text: $arraySource[$index() - 1]"></span> -
    <strong data-bind="text: $data"></strong> -
    <span data-bind="text: $arraySource[$index() + 1]"></span> -
  </li>
</ul>