淘汰 dom 操作后回调 jquery 函数答案

【问题标题】：Calling back jquery function after knockout dom manipulation淘汰 dom 操作后回调 jquery 函数
【发布时间】：2013-07-07 01:12:11
【问题描述】：

我对 Knockout 还很陌生，我正在尝试使用一个 jquery 插件，它将自定义样式应用于某些元素。但是由于我有一个从 ajax 调用中获取内容的页面，并且所有元素都是通过淘汰赛动态构建的，所以初始 jquery 函数调用不知道页面上有任何元素，因此没有对这些元素应用样式.

所以我要问的是如何在敲除完成操作元素 (DOM) 后回调 jquery 函数？

现在我调用 jquery 函数如下：-

$(document).on("load",function(){
    $(".element").callPlugin("add-style");
});

【问题讨论】：

标签： javascript jquery dom knockout.js

【解决方案1】：

applyBindings 是同步的，所以你可以在ko.applyBindings(VM) 之后调用callPlugin（在下一行）。

ko.applyBindings(VM);
 $(".element").callPlugin("add-style");

或者，如果您要多次更新 UI，则可以使用 custom bindings。假设.element 是<div>（也可以是其他任何东西），您的标签将如下所示：

<div class="element" data-bind="text: 'This is just some text which KO will bind',
                                updateUI: true">
This text will change. Wait for it..
</div>

注意data-bind 中的updateUI。这是它对应的JS代码：

ko.bindingHandlers.updateUI = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){          
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(".element").callPlugin("add-style");
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
        $(".element").callPlugin("update-style"); // just saying
    }
};

这将使您的插件在对 DOM 进行任何更改时自动初始化和更新。

希望这会有所帮助！

【讨论】：

将此标记为正确，因为这用很好的示例进行了解释。我确实使用了自定义绑定并且它有效。谢谢。两天以来，我一直在努力寻找解决方案。到目前为止，我很喜欢 Knockout。
值得一提的是ko.applyBindings()的绘画在使用ko.options.deferUpdates = true;时是不同步的。因此，例如，如果您尝试在之后直接获取svg.getCTM()，它将无法按建议工作。

【解决方案2】：

我建议通过自定义绑定来执行此操作：这样，您的“外部代码”可以与您的数据绑定更加集成。如有必要，您还将获得更新支持。

在此处阅读有关此概念的更多信息 http://knockoutjs.com/documentation/custom-bindings.html

【讨论】：