How to get DOM element from Kendo view model?

Question

I would like to know if it's possible to get the DOM element from a kendo mvvm.

My input is defined like :

<input id="myInput" type="text" data-bind="value: model.Name" />

at some point I'm setting the value in javascript like :

myViewModel.set("model.Name", "John Doe");

This sets the value inside the bound element automatically, but after setting that value I would like to change something on the DOM element that just got updated. Like :

myViewModel.getElement("model.Name").className = "MyClass;

It seems kendo doesn't have that kind of function. The opposite is possible tho with kendoBindingTarget

Answer 1

I ended up using a custom binding where on refresh (which is the set) I have access to the element :

html

<input id="myInput" type="text" data-bind="customValue: model.Name" />

js

kendo.data.binders.customValue= kendo.data.Binder.extend({
    init: function(element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);

        var that = this;
        $(that.element).on("change", function() {
            that.change();
        });
    },
    refresh: function() {
        var that = this,
            value = that.bindings["customValue"].get();

        $(that.element).val(value).addClass('MyClass'); //<======that.element========
    },
    change: function() {
        var value = this.element.value;
        this.bindings["customValue"].set(value);
    }
});