DataSource, Model and ViewModel -- Oh my

Thread is closed for posting
12 posts, 0 answers
  1. Norm
    Norm avatar
    12 posts
    Member since:
    Apr 2013

    Posted 23 Apr 2013 Link to this post

    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({...})"?
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Norm
    Norm avatar
    12 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    I read those links and they don't answer my questions.
  5. Norm
    Norm avatar
    12 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    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)?


  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Norm
    Norm avatar
    12 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    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. 
  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 30 Apr 2013 Link to this post

    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
  10. Norm
    Norm avatar
    12 posts
    Member since:
    Apr 2013

    Posted 30 Apr 2013 Link to this post

    Holger,

    In your example, is model simply a property of viewModel or is it referencing kendo.data.Model.define( {})
  11. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 01 May 2013 Link to this post

    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
  12. Sateesh
    Sateesh avatar
    1 posts
    Member since:
    Dec 2014

    Posted 18 Dec 2014 Link to this post

    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>
  13. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 19 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready