0 
     <div style="display: inline-block" data-bind="autocomplete : { multi:true, values:values}">
     </div>

オートコンプリート bindingHandler があります。複数選択の場合は、コードを追加したいと思います。以下のコードは動作しますが、bindingHandler に追加してもらいたいです。

 <div class='auto'>    
    <!-- ko foreach : values -->          
        <span data-bind="text: $data"></span>
    <!-- /ko -->     
    <span>       
     <div style="display: inline-block" data-bind="autocomplete : { multi:true, values: values}">
     </div>
    </span>    
</div>

autocomplete bindingHandler の Init でこのようなことをしようとしました。しかし、バインディングが正しく追加されていないと思います。bininghandler の init でこのような仮想バインディングを追加することは可能ですか?

 $element.wrap("<div class='auto'>");
 $element.wrap("<span>");
 $element.parent().before("<!-- ko foreach : values --><span data-bind='text: $data'></span><!-- /ko -->");

仮想バインディングなしでこのようにすると、機能します。

$element.wrap("<div class='auto'>");
        $element.wrap("<span>");
        $element.parent().before("<div><span data-bind='text: $data'></span></div>");

        var $div = $element.parent().prev();

        ko.applyBindingsToNode($div[0], function () {
            return {
                foreach: value.values
            };
        });

しかし、デザインが正しくないため、divで囲むことはできません。仮想バインディングを追加することは可能ですか?

4

1 に答える 1

0

JavaScript で HTML を設定することに固執する場合 (ただし、そうしないでください)、物事をバインドする内部関数を使用できます。

ko.bindingHandlers.thing = {
    update: function (element, valueAccessor) {
        var html = "The thing is <!-- ko text: thing -->"
                   + "<!-- /ko -->"
        ko.utils.setHtml(element, html);
    }
}

これには潜在的なセキュリティ上の問題があります (私は何も知りません) が{ 'controlsDescendantBindings': true };、バインディング ハンドラーの init ハンドラーから戻ることで改善されるようです。

簡単なデモ

于 2013-07-30T07:18:46.193 に答える