Javascript 任何viewmodel dom更新的淘汰JS事件

每当通过Knockout.JS更新DOM时，我都需要运行一段jquery ui代码。我意识到这可以使用自定义绑定来完成，但这似乎与特定的viewmodel相关，我希望全局执行，所以无论何时在它触发的任何viewmodel上发生这种情况

假设我总是希望在所有文本框上使用类“needsdate”的jQueryDatePicker，而不是将其添加到我的每个视图模型中，如果我可以全局地这样做，那就太好了

---

这可能吗

如果您不打算动态添加/删除元素，那么您可以正常地将它们连接起来。但是，如果您使用的是动态内容（例如使用ObservalArray修改其项目），那么您有两个选项：

1-与答案一样，您可以创建自定义绑定。如果不希望将值绑定到视图模型上的属性，则可以将绑定简化为：

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor) {
        //initialize datepicker with some optional options
        var options = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker(options);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    }
}; 

您可以将其放置在如下元素上：

---

2-另一个选项是使用

模板的
渲染后
（以及使用
模板的
foreach
）在渲染新内容后连接日期选择器。
我创建了一个
refreshJQuery（）
函数，可以一次性应用我所有的健壮行为。然后，当我订阅视图模型中的观测值以更新模型时，我调用此函数。和一次页面加载

function refreshJQuery() {
    $(".draggable, .droppable, .resizable").each(function () {

        var $element = $(this);

        if ($element.hasClass("draggable") && !$element.data("init-draggable")) {
            $element.data("init-draggable", true).draggable(dragBehavior);
        }
        if ($element.hasClass("droppable") && !$element.data("init-droppable")) {
            $element.data("init-droppable", true).droppable(dropBehavior);
        }
        if ($element.hasClass("resizable") && !$element.data("init-resizable")) {
            $element.data("init-resizable", true).resizable(resizeBehavior);
            $(this).children().fadeTo(2000, 0);
            $element.hover(function () {
                $(this).children().fadeTo(200, 1);
            },
            function () {
                $(this).children().fadeTo(750, 0);
            });
        }
    });
};

然后我按如下方式使用它，尽管我已经确定了另外两个需要调用此函数的观测值：

this.updateTime = function () {
    service.updateBookingTimes(this.id(), this.startDate(), this.endDate());
    refreshJQuery();
};

this.startDate.subscribe(this.updateTime, this);
this.endDate.subscribe(this.updateTime, this);

我还实现了@RPNiemeyer针对字段级JQuery订阅的解决方案，因此，除了他的datepicker示例之外，我还有类似的代码，可以将
$.button（）
重新应用到
标记，以及另一个将复选框转换为iPhone样式开关的代码。
您能进一步解释一下您的场景吗？通常，您会使用一个自定义绑定，该绑定针对一个可观察对象进行绑定。当可观察到的更改时，绑定将针对绑定所在的元素运行任何必要的jqueryui代码。可能有一种方法可以满足您的要求，但在提出建议之前，我希望了解更多关于用例的信息，因为这不是正常的方式。更新了我的主要帖子：假设我总是希望在所有文本框上都有一个JQuery datepicker类“needsdate”，而不是将其添加到我的每个视图模型中，如果我能在全球范围内做到这一点，那就太好了。这有帮助吗？如果您没有绑定到viewmodel，那么可能不需要使用knockout。我很确定我也有同样的情况，knockout会在刷新UI时删除JQuery句柄，因此不容易阻止它们相互碰撞。常用的建议解决方案是在鼠标悬停时使用
$.on（）
方法重新应用行为，但这不适用于Dropable（例如，在拖动元素时不计算悬停）。另一种方法是创建绑定处理程序，该处理程序在绑定更新时应用JQuery，但这并不总是适用于模板绑定，例如模板中的任何元素都可以应用于JQuery