How do you update the model that the current View is using.

8 posts, 0 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 20 Oct 2015 Link to this post

    Okay so you load a model

    var myModel = new kendo.observable({ name: "John", surname: "Doe" });

    Then you load a view:

    var myView = new kendo.View("idOfTemplateScriptTag", {model: myModel});

    Assume you had a layout object called myLayout:

    myLayout.showIn("#content", myView, "swap");

    This works just fine. Everything okay up to this point.

    But the documentation doesn't seem to say anything about how you're meant to replace the model in that view and still have MVVM properly bind all the new values to the relevant HTML elements. There are only two methods:

    1. Destroy and
    2. Render

    Are you supposed to:

    1. Reset the myModel properties back to defaults then set them to the new data that you want to display, or
    2. Instantiate a new View and Observable and render them by using ShowIn on the layout object?
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Oct 2015 Link to this post

    Hello Jacques,

     

    Replacing the view model of a view is not supported by design. In addition to the data displayed, the view model is supposed to contain the various view component event handlers, so swapping it with something different will most likely lead to unexpected results. The envisioned way to perform such changes would be through a data item field reassignment - implemented in the master > detail navigation of the sushi example here. The application example source code is just a couple of screens, so you should not have any troubles understanding it. 

     

    Regards,
    Petyo
    Telerik
     
    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. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 23 Oct 2015 in reply to Petyo Link to this post

    Hi Petyo,

    Questions on this Sushi app:

    1. Are you saying that my suggested answer (point 1) is the correct way of doing it? Except that you're replacing the field with a different object?
    2. This is a very simplistic example. Does it make a difference if the Details data is extracted from a web service instead of from a local DataSource
    3. Where does "current" come from in detailModel.get("current")? There's no such field on the detailModel and it's not an Observable field either.

    Seems your documentation needs to be updated to include the idea that you can randomly set obserable field values for fields that don't exist.

    Also, the documentation could do with a better explanation of how this is intended to be used because a master > detail view is the most common application usage that one can find!


     
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 27 Oct 2015 Link to this post

    Hello Jacques,

     

    - the current field is set here.

    - the datasource abstraction is meant to cover the local vs remote data differences. 

     

    In general, the approach I have suggested is just one of the many possible ones. Re-creating the view each time would also work. In general, the Kendo UI SPA toolkit is not a framework - you may pick just parts of it and use them in a way you see fit for your project requirements. 

     

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 03 Nov 2015 in reply to Petyo Link to this post

    Thanks Petyo, but I think you might have missed my point about "current" in that it's a random property that doesn't exist on the actual object which means that Observables allow for these random properties to be added, but this is not documented.

    Can you explain what you mean by the second poing about DataSource abstraction?

  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 05 Nov 2015 Link to this post

    Hello Jacques,

     

    the "random" property assignment you refer to is a standard JavaScript concept. JavaScript is a dynamic language - like the MDN article describes, 

     

    "You can define a property by assigning it a value."

     

    The observable objects Kendo UI exposes are no exception to this behavior. 

    The datasource abstraction (including local and remote data) is covered in details in our documentation.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 05 Nov 2015 in reply to Petyo Link to this post

    The documentation doesn't cover examples of using the dynamic nature of JavaScript only that you create observables with JavaScript objects with predefined properties:

    1.this.set("current", items.get(itemID));

    Specifically, the code above is a concern, because it gets "randomly" introduced instead of being properly declared as part of the object. So, if a team member were to be debugging code looking for the source of a problem related the property Current, they'd have a hard time because they wouldn't find it declared on the actual observable object.

    Thanks for the link to the documentation. It was pretty much the standard stuff, I thought you may have been alluding to some pattern or practice that we weren't aware of.

     

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Nov 2015 Link to this post

    Hello Jacques,

    Thank you for the feedback. If I understand you correctly, it looks like the purpose of the set() method and its relationship to the ObservableObject used by the Kendo UI MVVM pattern is not that obvious. Currently this relationship is documented at:

    http://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#setting-field-values-of-an-observableobject

    http://docs.telerik.com/kendo-ui/framework/mvvm/overview#getting-started

    http://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#overview

    Please do share if you have any specific suggestions on where you would have expected the above information to be presented differently, so that it is better conveyed.

    Regards,
    Dimo
    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