2

カスタムバインディング内から要素をバインドする方法はありますか? たとえば、カスタムバインディングがあり、それにバインドして、アイテムの監視可能な配列を作成します。

var someArrayOfItems = ko.observableArray(['item1', 'item2', 'item3']);
...
<div data-bind="myBinding: someArrayOfItems"></div>

ここで、myBinding に、バインドされた div 要素内の「someArrayOfItems」からのすべての要素を一覧表示するようにします。

<ul data-bind="foreach: someArrayOfItems">
    <li>
        <span data-bind="text: $data"></span>
    </li>
</ul>

カスタムバインディングを使用してそのような操作を行うことは可能ですか? 助けてくれてありがとう。

4

1 に答える 1

11

この関数ko.applyBindingsToNodeを使用して、バインディングを要素に動的に追加できます。

あなたの場合、コンテンツに適切な「テンプレート」を入力する必要もあります。

たとえば、次のようなことができます。

ko.bindingHandlers.myBinding = {
    init: function(element, valueAccessor) {
        var ul = document.createElement("ul"),
            data = valueAccessor();

        //append a new ul to our element
        element.appendChild(ul);

        //could use jQuery or DOM APIs to build the "template"
        ul.innerHTML = "<li><span data-bind='text: $data'></span></li>";

        //apply foreach binding to the newly created ul with the data that we passed to the binding
        ko.applyBindingsToNode(ul, { foreach: data });;

        //tell Knockout that we have already handled binding the children of this element
        return { controlsDescendantBindings: true };
    }        
};

サンプルはこちら: http://jsfiddle.net/rniemeyer/z458E/

于 2012-10-28T14:39:30.887 に答える