Access value of Dependent Method after Binding in JavaScript

2 posts, 0 answers
  1. James
    James avatar
    4 posts
    Member since:
    Jul 2012

    Posted 08 Oct 2013 Link to this post

    I'm trying to access a Dependent Method's calculated value in JavaScript after the binding.  Why doesn't this work?
    // Create an observable view model object.
    var person = kendo.observable({
      firstName: "John",
      lastName: "DeVight",
     
      // Create a dependent method (calculated field).
      fullName: function() {
        // The "get" function must be used so that changes to any
        // dependencies will be reflected in the dependent method.
        return this.get("firstName") + " " + this.get("lastName");
      }
    });
     
    // Bind the view model to the personFields element.
    kendo.bind($('#personFields'), person);
     
    // This produces the function() without handing off the value to the JS variable
    var fullName = person.get("fullName");

    Or trying it by replacing the "this" with "person"...

    // Create an observable view model object.
    var person = kendo.observable({
      firstName: "John",
      lastName: "DeVight",
     
      // Create a dependent method (calculated field).
      fullName: function() {
        // The "get" function must be used so that changes to any
        // dependencies will be reflected in the dependent method.
        return  person.get("firstName") + " " + person.get("lastName");
      }
    });
     
    // Bind the view model to the personFields element.
    kendo.bind($('#personFields'), person);
     
    var fullName = person.get("fullName");

    If I did something similar in KnockoutJs, it would be like this below (and this works): (jsFiddle: http://jsfiddle.net/piercove/S6Q8D/2/)

    var ViewModel;
     
    // Create an observable view model object.
    var person = function() {
        var self = this;
        self.firstName = ko.observable("John");
        self.lastName = ko.observable("DeVight");
     
        // Create a dependent method (calculated field).
        self.fullName = ko.computed(function () {
            return self.firstName() + " " + self.lastName();
        });
    };
     
    // Match to the global JS object
    ViewModel = new person();
     
    // Bind the view model to the personFields element.
    ko.applyBindings(ViewModel, document.getElementById("result"));
     
    var fullName = ViewModel.fullName();
     
    $("#result").html(fullName);
    So, the question is, how do I pull off the equivalent in Kendo MVVM.  I try to keep my code in JS files and not in the web page itself (Razor view in ASP.NET MVC to be exact).  In my JS files, I have a unique "ViewModel" object that creates a new instance of the view model for that page, so that all the observables and internal functions can be accessed by any other functions in that same JavaScript file.  I'm wondering how to pull off something similar with Kendo MVVM.

    Thanks!
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 10 Oct 2013 Link to this post

    Hi James,

    I am afraid that currently Kendo UI does not support dependent or computed Observables, however if you bind an element to the fullName function and change the first or lastName, that change will reflect on the element as expected. Here is an example demonstrating that behavior. You can get the computed value of the fullName function by invoking it:  
    var fullName = person.get("fullName")();

    I would recommend you to submit this idea about computed observables at Kendo UI UserVoice so other members of the community can evaluate, comment on and vote for it. Most voted ideas are included in next Kendo UI releases.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top