订阅 KnockoutJS 中现有 DOM 元素的绑定答案

【问题标题】：Subscribe to bindings of an existing DOM element in KnockoutJS订阅 KnockoutJS 中现有 DOM 元素的绑定
【发布时间】：2015-04-27 15:45:35
【问题描述】：

我需要订阅 DOM 元素的现有绑定。例如，我有以下输入元素：

<div id="MyDiv">
    <input id="MyInput" data-bind="enable: isEnabled()" />
</div>

现在，假设我只能访问 DOM 元素，我需要执行以下操作：

var inputElement = $("#MyInput");
var bindings = ko.utils.getBindings(inputElement); // getBindings does not exist
var enableBinding = bindings["enable"];
if (enableBinding != undefined) {
    enableBinding.subscribe(function (value) {
        if (value == false)
            $("#MyDiv").addClass("disabled");
        else
            $("#MyDiv").removeClass("disabled");
    })
}

有没有办法做到这一点？

更新：我已经扩展了示例，以便您看到我的用例：这里的 div 由预处理器自动生成，并且需要 disabled 类，当输入被禁用。如果仅在输入元素上更改属性，则它不起作用。添加/删除必须是透明的...

【问题讨论】：

你试过ko.utils.getBindings(inputElement.get(0));吗？目前你传入的是 jQuery 对象，而不是元素？编辑：啊，我想你的意思是getBindings 本身不存在......？
我不需要元素的视图模型，但需要精确的绑定，例如“启用”
在这个例子中，我需要知道“disabled”属性什么时候改变了...
嗯，明白你的意思...
也许还有另一种方法，例如自定义绑定 - 您要解决什么问题？

标签： javascript knockout.js data-binding

【解决方案1】：

简短回答：不要这样做。 getBindings 在 Knockout 工具包中不是特别明显的功能是有原因的。

长答案：您可以通过一些间接的方式获得原始绑定。

HTML：

<div id="MyDiv">
    <input id="MyInput" data-bind="enable: isEnabled" />
</div>

<input type="checkbox" data-bind="checked: isEnabled" />

JS：

var viewModel = function() {
    self.isEnabled = ko.observable(true);           
}

ko.applyBindings(new viewModel());

var input = $('#MyInput')[0];

function getBinding(element, name) {
    var bindings = ko.bindingProvider.instance.getBindings(input, ko.contextFor(input));

    return bindings.hasOwnProperty(name) ? bindings[name] : null;
}

var binding = getBinding(input, 'enable');

binding.subscribe(function(value) {
    if (value == false)
        $("#MyDiv").addClass("disabled");
    else
        $("#MyDiv").removeClass("disabled");
});

Working JSFiddle

编辑：找到更短的方法

同样，如果有任何方法可以说服您的预处理器添加 CSS 可观察对象，请这样做。以这种方式处理绑定依赖于 Knockout 3.3.0 内部实现的特定怪癖，在未来的版本中可能会发生变化。

【讨论】：

【解决方案2】：

查看here 提供的答案。

简而言之，你可以使用

var viewModel = ko.dataFor(domElement);

获取绑定到该 DOM 元素的视图模型。然后，您可以订阅附加到该视图模型的任何可观察对象。

【讨论】：