jQuery DOM 来自 Knockout ViewModel 的操作 - 使用 bindingHandlers？

Question

我有一个淘汰的 viewModel，它看起来像这样：

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

还有一个 bindingHandler，如下所示：

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

我希望 myViewModel 在调用更新方法时调用 manipulateDom。

我可以使用 bindingHandler 中的回调集来做到这一点：

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' observable 并在 bindingHandler 中订阅它：

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 函数有很多逻辑不适用于淘汰赛（测量 window 高度，测量 DIV 高度等...）

谢谢！

Answer 1

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

如果您的 update 方法对其他可观察属性做了一些更改，我将创建一个计算属性来订阅当前状态，而不是使用计数器ViewModel 并自动调用您的 DOM 操作绑定，如果您将它作为绑定参数传递，则无需递增计数器或任何其他标志。

jQuery DOM 来自 Knockout ViewModel 的操作 - 使用 bindingHandlers？

jQuery DOM manipulation from Knockout ViewModel - use bindingHandlers?

javascript

knockout-2.0

knockout.js