Get the view model from a given DOM element

[Chris]

Say I have the following:

var viewModel = kendo.observable({ Property1: "value" });

kendo.bind($("#element"), viewModel);

Then later on I want to get access to the view model but only have access to the element.
Knockout has something like:

var viewModel = ko.dataFor(element);

Is there a way I can get access to the view model just from the element?

Thanks
Chris

[Alexander Valchev]

Hi Chris,

You can get the ViewModel using the kendoBindingTarget property of the HTML element (not jQuery object).
For example:

<form id="example">
    <label>First Name:
        <input id="firstName" data-bind="value: firstName" />
    </label>
</form>

kendo.bind($("#example"), viewModel);

$("#firstName").get(0).kendoBindingTarget.source; //the ViewModel
//or
document.getElementById("firstName").kendoBindingTarget.source;

Note that kendoBindingTarget is property of the elements that are bound to a ViewModel, the parent container (in that case form#example) does not have such property.

Kind regards,
Alexander Valchev
the Telerik team

[Leo]

I have exactly this setup and it isn't working. Could it be that this has changed since 2013?

When i look at  $("#firstName").get(0).kendoBindingTarget

It doesn't show the source property, it does show other properties like: options, target and toDestroy

Any advice on how i can obtain the viewmodel when i only have references to the form and its elements?

[Dimitar]

Hеllo Leo,

On the following Dojo example you can find a simple implementation, where the binding target is retrieved and logged in the browser console. With it, we have access to all of the properties like source, options and toDestroy. 

I assume that in your case the issue is more likely related to the DOM element. Please make sure that it is available and correctly bound to the respective ViewModel.

Regards,
Dimitar
Progress Telerik

[Leo]

Hi Dimitar,

I use MVC wrappers and my view contains:

@(Html.Kendo().ComboBoxFor(m => m.Activiteitsoort)
.DataTextField("Code")
.DataValueField("idActiviteitsoort")
.DataSource(ds =>
{
ds.Read(read => read.Action("Activiteitsoorten", "Activiteitsoort", new { Area = "Tabellen" }).Data("passActiviteitsoort"));
ds.Events(e => e.Error("DataSourceRequestErrorHandler"));
})
.HeaderTemplateId("ActiviteitsoortHeaderTemplate")
.TemplateId("ActiviteitsoortTemplate")
.AutoBind(false)
.Suggest(true)
)

And when i compare it to your example, the html output lacks this attribute on the input tag:
data-bind="value: Activiteitsoort"

As far as i can tell, without the attribute the viewmodel wont bind. any advice ?

[Dimitar]

Hi Leo,

In general, the Kendo UI MVVM initialization is not designed to be combined with the Kendo UI server wrappers. In most cases combining server wrappers and MVVM is not needed. The recommended/cleaner approach when using MVVM is to initialize widgets with the markup initialization without using the server wrappers. 

However, a data-bind attribute is also possible to be added when widget is initialized with the MVC HtmlHelpers by using the HtmlAttributes option:

<div id="hp">
@(Html.Kendo().ComboBox()
.Name("codeId")
.HtmlAttributes(new { data_bind = "value: selectedCode, source: codes" })
.DataTextField("CodeName")
.DataValueField("CodeID")
)
</div>

<script>
$(document).ready(function () {
var viewModel = kendo.observable({
codes: new kendo.data.DataSource({
transport: {
read: {
url: "/Home/GetCodes",
dataType: "json"
}
}
}),
selectedCode: null
});

kendo.bind("#hp", viewModel);
})
</script>

In addition to the above, please refer to the MVVM Overview Documentation for additional information and examples.

Regards,
Dimitar
Progress Telerik