名前を知らずにforeachバインディング内のコレクションへの参照を取得する

Question

次の例では、親コレクション（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> 

たとえば、私は、foreachのがバインドされているものを渡すsource: $sourceような何かを行うことができるようにしたいと思います。

Answer 1

デフォルトではアクセスできないと思います。あなたは...それはしかしbindingContextに追加結合foreachを拡張し、カスタムを作成することができ

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>