Get the view model from a given DOM element

6 posts, 0 answers
  1. Chris
    Chris avatar
    1 posts
    Member since:
    Nov 2012

    Posted 05 May 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2890 posts

    Posted 07 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Leo
    Leo avatar
    18 posts
    Member since:
    Jan 2016

    Posted 13 Feb Link to this post

    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?


  4. Dimitar
    Admin
    Dimitar avatar
    454 posts

    Posted 15 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Leo
    Leo avatar
    18 posts
    Member since:
    Jan 2016

    Posted 15 Feb in reply to Dimitar Link to this post

    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 ?

  6. Dimitar
    Admin
    Dimitar avatar
    454 posts

    Posted 19 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top