javascript - 从 Knockout ViewModel 进行 jQuery DOM 操作 - 使用绑定(bind)处理程序？

Question

我有一个 knockout View 模型，如下所示:

function myViewModel() {
    this.update = function() {
        ...
    }
    ...
}

还有一个绑定(bind)处理程序，如下所示:

ko.bindingHandlers.myBindingHandler = {
    init: function(element, valueAccessor, allBindings, viewModel) {
        function manipulateDom(element) {
            ...
        }
    }
}

我希望 myViewModel 每当调用 update 方法时都调用操作Dom。

我可以使用绑定(bind)处理程序中设置的回调来完成此操作:

function myViewModel() {
    this.update = function() {
        ...
        this.myBindingHandlerCallback();
    }
    ...
}

ko.bindingHandlers.myBindingHandler = {
    init: function(element, valueAccessor, allBindings, viewModel) {
        viewModel.myBindingHandlerCallback = manipulateDom.bind(null, element);
    }
}

<div data-bind="myBindingHandler: null"></div>

我的另一个想法是使用“updateCount”可观察对象并在绑定(bind)处理程序中订阅它:

function myViewModel() {
    this.updateCount = ko.observable(0);
    this.update = function() {
        ...
        this.updateCount(this.updateCount() + 1);
    }
    ...
}

ko.bindingHandlers.myBindingHandler = {
    update: function(element) {
        manipulateDom(element);
    }
}

<div data-bind="myBindingHandler: updateCount"></div>

这两种解决方案都让人感觉脆弱且困惑。解决此类问题的“knockout ”方法是什么？我应该只从 viewModel 中操作 DOM 吗？

我应该补充一点，manipulateDom 函数有很多逻辑，这些逻辑不适用于 knockout 方式(测量窗口高度、测量 DIV 高度等...)

谢谢!

Answer 1

第二种方法(使用计数器)要好得多，因为 ViewModel 不应通过覆盖其属性来覆盖和更改 ViewModel 的行为。

如果您的 update 方法对其他可观察属性进行了一些更改，我将创建一个计算属性，该属性将订阅 ViewModel 的当前状态，并在以下情况下自动调用您的 DOM 操作绑定(bind)，而不是使用计数器您可以将其作为绑定(bind)参数传递，然后无需增加计数器或任何其他标志。