Recommendations on app structure using new SPA features

[Mike Powell]

I have been seriously looking over the new kendo features (View, Layout, Router, etc). I am trying to figure out the best practices for structuring my app with said new features and was looking for some input on the subject.

I would appreciate some feedback to the following questions:

1. My general impression is that the ObservableObject is solely intended for supplying data and event handlers to views+widgets. The responsibility of populating widgets and binding events falling to the bound views and any widgets they contain. Is this assumption correct?
2. Assuming yes, if I want to pop up a temporary window, or add a widget to one of my bound views, who should be responsible for this? The ObservableObject, View, Widgets, or the Router?
3. When it comes to displaying and editing data, the impression that I have gotten is that we are supposed to use views (with a form) for single objects, and widgets for collections of objects. Is that correct?
4. When it comes to binding templates to MVVM bound widgets inside Views, all your examples say to use IDs to script tags within the page. Well what should I do when I am loading templates as strings in RequireJS rather than putting them in the DOM?

Thanks for any help you can provide. I am really eager to start using these new features. :)

[Alexander Valchev]

Hello Mike,

Up to your questions:

1. Yes, the ObservableObject (the ViewModel) is responsible for providing data and event handling to widgets/Views.
   
   
2. Initialization of the widgets/components is done during the binding/rendering process.
   
   
3. The answer of this question depends on your specific scenario. Generally speaking, if you have to deal with a single object, it would be much easier to bind it to a form, but if you have to work with large amount of data, you may consider using Grid or ListView.
   
   
4. You are not limited to use IDs. It is required for the script element to be loaded and to be selectable (via class, name, custom attribute, id etc.)
   
   

I hope this information will help. For more details I recommend you to check the SPA blog posts and the corresponding documentation:

• http://docs.kendoui.com/getting-started/framework/spa/overview
• http://docs.kendoui.com/api/framework/view

Kind regards,
Alexander Valchev
the Telerik team

[Mike Powell]

I think I might need to clarify my questions.

For #2, I was referring to adding widgets and popping up temporary windows dynamically after the page has been populated by all the views and widgets. For example, when I click a button to pop up a temporary edit window to expose more functionality. Where should I handle these operations? I get the impression that the ObservableObject is not the correct place, since it needs to be ignorant of the views/widgets. So should I package that functionality into a custom widget?

For #4, let me construct a scenario to illustrate my point. We're assuming that all my pertinent code is shared via RequireJS (templates and views loaded via text plugin). Say I have a grid column template I want to share between different views. What would be the best way to have my views reference that template if I am using the declarative style?

5.) I have another question. To me, it's pretty clear that datasources are not meant to handle single objects. So do you recommend we use AJAX calls to populate ObservableObject fields that are monitored by the views? Or just use a datasource that has a collection with only one item?

Hope that helps. Thanks.

[Alexander Valchev]

Hi Mike,

The ObservableObject is connected with the View and widgets. That said it is OK to reference the View or a particular widget from within the observable. There is no need to package the functionality into a custom widget.

For further guidance please refer to the sample SPA applications available at Kendo UI demo page.

• http://demos.kendoui.com/websushi/
• http://demos.kendoui.com/aeroviewr/

Regards,
Alexander Valchev
Telerik

[Mike Powell]

Thanks for the directions. I was able to find the missing pieces of info I needed from the following "How Do I?" section:
http://docs.kendoui.com/howto/load-templates-external-files