knockout.js - 如何在使用 KnockoutJS 评估之前移动的 DOM 元素上应用绑定(bind)？

Question

我创建了一个自定义绑定(bind)，将一个 DOM 节点移动到当前 DOM 节点之前。移动的 DOM 节点上有一个文本绑定(bind)。需要明确的是，这看起来类似于以下简化示例 [ jsfiddle ]:

HTML

<div data-bind="myBinding: myObservable">
   <div data-bind="text: myOtherObservable"></div>
</div>

KnockoutJS 绑定(bind)

ko.bindingHandlers.myBinding = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $element = $(element),
            $childElement = $element.find('div');
        
        //Move the inner div to before the current div, and it won't get evaluated.
        $(element).before($childElement);
    }
};

KnockoutJS View 模型

function ViewModel() {
    this.myObservable = ko.observable(false);
    this.myOtherObservable = ko.observable("Test");
}

ko.applyBindings(new ViewModel());

问题

文本绑定(bind)未应用于内部子节点。我假设这是因为 DOM 树是从上到下遍历的。当子节点移动到当前节点之前时，它现在位于当前节点之前，并且在向前遍历 DOM 时将被跳过。

我的实际绑定(bind)需要将 div 移动到当前 div 之前。但是，我需要应用绑定(bind)。

问题

在绑定(bind)处理程序中移动它之前，是否可以在子 DOM 节点上手动应用绑定(bind)？如果可以，如何实现？

Answer 1

在谷歌搜索如何将绑定(bind)应用于特定元素后，我遇到了 this StackOverflow question详细说明如何将 KnockoutJS 应用于局部 View 。

ko.applyBindings 的第二个参数可以是 DOM 的特定元素，作为 View 的根。因此，在我的绑定(bind)处理程序中，我可以简单地执行以下操作:

ko.applyBindings(viewModel, $childElement[0]);

注意:您不能将 jQuery 对象传递给它。它必须是 DOM 元素。