javascript - 订阅 KnockoutJS 中现有 DOM 元素的绑定(bind)

Question

我需要订阅 DOM 元素的现有绑定(bind)。作为示例，我有以下输入元素:

<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类。如果仅在输入元素上更改属性，则它不起作用。添加/删除必须透明......

Answer 1

简短回答:不要这样做。 getBindings 在 Knockout 工具包中不是一个特别明显的函数是有原因的。

长答案:您可以通过一些间接方式获得原始绑定(bind)。

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 observable，请这样做。以这种方式处理绑定(bind)依赖于 Knockout 3.3.0 内部实现的特定怪癖，这些怪癖可能会在未来的版本中发生变化。