如何获得从淘汰赛结合的DOM元素?(How to get to the DOM element fr

2019-07-20 11:54发布

我已绑定使用淘汰赛DOM元素到视图模型。 当我改变底层模型上的属性它改变了DOM - 一切ok。

但是,有没有办法让到绑定的DOM元素,所以我可以当底层模型被更新的外部添加一个类呢?

我已经使用自定义绑定,给了我访问DOM元素,但我不知道是否有一个更简单直接从视图模型的绑定属性的方式?

谢谢

示例代码(打字稿)

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?

}

Answer 1:

你可以滥用可见的结合,例如执行传递$元素和$数据的功能。

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

看看这个小提琴

我知道你提到上面的,你不希望使用自定义绑定,但我仍然要指出这个选项。 虽然我使用自定义绑定逻辑用于修改所述元件在视图模型仍然会发生当外部变化发生。

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>

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



文章来源: How to get to the DOM element from a knockout binding?
标签: knockout.js