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

【问题标题】：jQuery DOM manipulation from Knockout ViewModel - use bindingHandlers?来自 Knockout ViewModel 的 jQuery DOM 操作 - 使用 bindingHandlers？
【发布时间】：2015-04-29 14:35:32
【问题描述】：

我有一个看起来像这样的淘汰视图模型：

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

还有一个如下所示的 bindingHandler：

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

我希望 myViewModel 每次调用 update 方法时都调用 operaDom。

我可以使用 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”可观察对象并在 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>

这两种解决方案都让人感到脆弱和混乱。解决此类问题的“淘汰”方式是什么？我应该只在 viewModel 中操作 DOM 吗？

我应该补充一点，operatedDom 函数有很多不适用于淘汰赛的逻辑（测量窗口高度、测量 DIV 高度等......）

谢谢！

【问题讨论】：

您是否尝试在自定义绑定处理程序中使用init 旁边的update: function(element, valueAccessor, allBindings, viewModel) { ...？
对于我的第二个示例，这是一种更明智的方法，但是将“updateCount”属性附加到 viewModel 感觉有点混乱。还有其他选择吗？我已经用你的建议更新了我原来的问题。

标签： javascript knockout.js knockout-2.0

【解决方案1】：

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

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

【讨论】：