任何 viewmodel dom 更新的 Knockout JS 事件

Question

每当通过 Knockout.JS 更新 DOM 时，我都需要运行一段 jquery ui 代码。我意识到这可以使用自定义绑定来完成，但这似乎与特定的视图模型相关，我想在全局范围内执行此操作，因此每当它发生在它触发的任何视图模型上时？

可以说，我总是希望在所有具有“needsdate”类的文本框中使用 JQuery 日期选择器，而不是将其添加到我的每个视图模型中，如果我可以全局执行此操作，那就太好了。

这可能吗？

Answer 1

如果您不打算动态添加/删除元素，那么您可以像平常一样连接它们。但是，如果您正在处理动态内容（例如使用修改其项目的 observableArray），那么您有几个选择：

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-另一个选项是使用 afterRender template 的功能（以及 foreach< /code> 使用 template) 在呈现新内容后连接日期选择器。

Answer 2

我创建了一个 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);
            });
        }
    });
};

然后我按如下方式使用它，尽管我已经确定了另外 2 个可观察量，但我还需要从中调用此函数：

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 订阅解决方案，因此除了他的日期选择器示例之外，我还实现了类似的代码将 $.button() 重新应用到 标签，另一个将复选框转换为 iPhone 风格的开关。