如何从敲除绑定中获取DOM元素?

Mar*_*cel 9 knockout.js

我使用knockout将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?

}
Run Code Online (Sandbox Code Playgroud)

Gab*_*abe 11

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

<span data-bind="visible: func1($element, $data)">Test span</span>
Run Code Online (Sandbox Code Playgroud)

看看这个小提琴

我知道你上面提到你不想使用自定义绑定但我仍然想指出这个选项.虽然我正在使用自定义绑定,但是当外部更改发生时,修改元素的逻辑仍将在viewmodel中发生.

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");
    };
    ......
};
Run Code Online (Sandbox Code Playgroud)

和HTML将是

<button data-bind="click: btnClick">change element text or something else</button>
<span data-bind="widget: spanElement"></span>
Run Code Online (Sandbox Code Playgroud)

我已经更新了小提琴,所以你可以看到它在行动