DataSource, Model and ViewModel -- Oh my

[Norm]

Hello Ninjas,

I'm new to Kendo UI and I am having a hard time digesting how DataSource, Model and ViewModel are intended to be used.

1. what's the point of Models in Kendo UI when all of the documented examples seem to store data everywhere!

For example:

var viewModel = kendo.observable({name: "John Doe"});

Shouldn't "John Doe" live inside a model?

2. Do you need to define a model when defining a DataSource or does the DataSource act as a model?
If the DataSource will return data, why do I need to define a model?

3. If ObservableObject is used to respond to events on the view and Model inherits ObservableObject, am I correct in saying that Models can do everything that ObservableObjects can do, and more? So why even use ObservableObject in the first place?

4. Is "ViewModel" referred to as "new kendo.data.ObservableObject({...})"?

[Atanas Korchev]

Hi Norm,

 I recommend reviewing the following help topics:

Kendo MVVM
kendo.ObservableObject API reference
kendo.data.Model API reference
kendo.data.DataSource API reference

Regards,
Atanas Korchev
the Telerik team

[Norm]

I read those links and they don't answer my questions.

[Norm]

For example, in your Kendo MVVM overview page:

"The View-Model part of MVVM is responsible for exposing the data objects
from the Model in such a way that those objects are easily consumed in
the View."

Why are your recommending that the View-Model (or ObservableObject) allow data to be stored as per your examples?

var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});

I would think that "John Doe" should live in a model defined as a person?
Otherwise what it is the point of using Models when Model data can be crammed into an Observable (View-Model)?

[Atanas Korchev]

Hello,

 Here are some excerpts from those links:

"The ObservableObject is a very important piece of the Kendo UI framework. It is the building block of Kendo MVVM. In addition· the Kendo DataSource contains instances of the ObservableObject"

"The Model inherits from the ObservableObject and extends it with the ability to define schema - fields and methods. The DataSource contains instances of the Model when theschema.model setting is specified."

The kendo.observable method returns a kendo.ObservableObject. The kendo.data.Model inherits from ObservableObject. Thus you can use a kendo.data.Model with MVVM. We are using the kendo.obvservable in our demos because it is a lot easier and doesn't require an explicit model definition.

Regards,

Atanas Korchev
the Telerik team

[Norm]

From all of the Kendo examples I have seen, it seems that all of the data is crammed into the View-Model, when the View-Model should by definition be just to expose the events of how the data (model) interacts with the view.

You are saying that the Model can also be considered the View-Model because it inherits ObservableObject.

So is there a simple example where a Model, View-Model and View are all used together,
and not just View-Model with View or Model with View?

I just want to see clear separation of the Model, View-Model, View framework. 

[Atanas Korchev]

Hello Norm,

 Here is an example showing how you can use kendo.data.Model with Kendo MVVM : http://jsbin.com/eciros/1/edit

Regards,
Atanas Korchev
the Telerik team

[Holger]

IMHO it's good practice to separate the model (transport object) from event handlers and functions that are also contained in the view model. That's because the view model may contain additional fields for UI logic that are not part of the data model and when it comes to sending the data to the server it will be easier to just send the pure model data to the server.

So I would go with something like this:

var viewModel = kendo.observable({

                model: {
                // .
                // .
                // .
                },

                // additional fields, functions, event handlers
                // .
                // .
                // .
});

Just my 2 cents.

Regards,
Holger

[Norm]

Holger,

In your example, is model simply a property of viewModel or is it referencing kendo.data.Model.define( {})

[Holger]

This depends on your needs. Generally it is not necessary to derive your model from kendo.data.Model, it can be a plain JavaScript object. You will just have to use the ObservableObject.set method to set the model in the observable and it will automatically becomes an observable too.

On the other side, if you want to define a schema for your "model" it may be better to use the Kendo.data.Model, also it provides the dirty field that is useful in some scenarios.

HTH,
Holger

[Sateesh]

I have a url which returns only one json value. I need to set that value to a label.
<div data-role="view" id="contfrm" >
     <label id="dispvalue"></label>
</div>

[Petyo]

Hello Sateesh,

the help request you have issued is not related to this forum thread. Please open a separate support ticket for it. 

Regards,
Petyo
Telerik