Access value of Dependent Method after Binding in JavaScript

[James]

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!

[Alexander Popov]

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