【问题标题】：How can I apply bindings on a DOM element that will be moved before it is evaluated with KnockoutJS?如何在使用 KnockoutJS 评估之前将移动的 DOM 元素应用绑定？
【发布时间】：2014-03-31 13:24:45
【问题描述】：

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

HTML

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

KnockoutJS 绑定

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 视图模型

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

ko.applyBindings(new ViewModel());

问题

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

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

问题

在我将绑定处理程序移动到子 DOM 节点之前，是否可以手动应用绑定？如果可以，怎么做？

【问题讨论】：

标签： knockout.js

【解决方案1】：

在谷歌搜索如何将绑定应用到特定元素后，我发现this StackOverflow question 详细介绍了如何将 KnockoutJS 应用到局部视图。

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

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

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

【讨论】：