Question

     <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>

我试图在自动完成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
            };
        });

但是我不能用它包围它，因为设计不对。是否可以添加虚拟绑定？

Answer 1

如果您坚持在JavaScript中设置HTML（但请不要），您可以使用绑定事物的内部函数。

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

这有潜在的安全问题（我对此一无所知），但似乎是通过从绑定处理程序的init处理程序返回{ 'controlsDescendantBindings': true };来进行补救。

添加虚拟绑定的BindingHandler

1 个答案:

simple demo