如何从敲除绑定中获取 DOM 元素？答案

【问题标题】：How to get to the DOM element from a knockout binding?如何从敲除绑定中获取 DOM 元素？
【发布时间】：2013-02-10 20:11:14
【问题描述】：

我已使用敲除将 DOM 元素绑定到 viewModel。当我更改底层模型上的属性时，它会更改 DOM - 一切正常。

但是，有没有办法获取绑定的 DOM 元素，以便在底层模型从外部更新时向它添加一个类？

我使用了自定义绑定，它可以让我访问 DOM 元素，但我想知道是否有直接来自 viewModel 的绑定属性的更简单方法？

谢谢

示例代码（TypeScript）

SetMyCell(row: number, newValue: any) {

    var ditem = this._DataItems[row];

    // update the actual value    
    ditem.Producer(newValue);

    // Now I wish to decorate the DOM item this Producer property is 
    // bound to with a class. How to go about that?

}

【问题讨论】：

我个人只会对 DOM 元素的类进行数据绑定。 <div data-bind="attr: { class: functionToDetermineClass }"> 或者，如果您有多个课程将永远存在<div data-bind="attr: { class: 'class1 class2 ' + functionToDetermineClass() }">
谢谢 - 我在其他地方使用过这种技术 - 事情是，我可能想将 DOM 用于其他操作，我真的可以对它进行引用！你知道任何其他方式（不是自定义绑定）..
This 可能会帮助你
@jonhopkins - 抱歉 - 虽然很有趣，但它处理传递更多信息的事件 - 在我的示例中，我通过外部事件 (websocket) 更新源，因此我只需要原始源玩...还有什么想法吗？
您阅读第二个答案了吗？它提供了一种无需触发任何事件即可获取元素的方法，尽管它假设您可以控制元素的 id。根据您的示例代码，您似乎可以做到这一点。如果没有，那我将不得不继续寻找。

标签： knockout.js

【解决方案1】：

您可以滥用可见绑定，例如执行传递 $element 和 $data 的函数。

<span data-bind="visible: func1($element, $data)">Test span</span>

看看这个fiddle

我知道您在上面提到您不想使用自定义绑定，但我仍然想指出这个选项。尽管我使用的是自定义绑定，但当外部更改发生时，修改元素的逻辑仍将发生在视图模型中。

ko.bindingHandlers.widget = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var elemObservable = valueAccessor();
        if (ko.isObservable(elemObservable)) {
            elemObservable(element);
        }
    }
};

var vm = function () {
    var self = this;
    .....
    self.spanElement = ko.observable();
    self.btnClick = function (){
        var elem = self.spanElement();
        $(elem).html("This is the span element");
    };
    ......
};

html 会是

<button data-bind="click: btnClick">change element text or something else</button>
<span data-bind="widget: spanElement"></span>

我已经更新了fiddle，所以你可以看到它的实际效果

【讨论】：