I've been tasked w/ creating a wizard-like, information collection workflow using Kendo MVVM. It was suggested SPA might be a good fit for this project. The basic idea is asking the user at the beginning which options they'd like to include, and then based on those choices, allow the user to configure each in detail using a Next page, previous page "wizard like" workflow. Does this sound like a good use for Kendo SPA? 

One of my concerns is my view model(s) getting too large. I might be able to mitigate this w/ proper object oriented Javascript class composition, but in general, should viewmodel size be a concern w/ SPA? The other concern is having to create a lot of new kendo.View instances to house all the different "content" areas of each pages. In total, there easily could be 40-50 different views for the different content.

I've seen the kendo music store SPA app as well as sushi, but these are very simple apps with only a small handful of different content views. 
Surely I wouldn't want to keep those in memory, right? Any insight on if this is a good idea (and if so) would be the best way to architect the application, would be most helpful. 

I'm sorry if this question seems elementary, I am new to both MVVM and SPA, not to mention modern OO Javascript. I come from ASP.NET MVC mainly.

Thanks in advance!

PS: I've read the three "A Day at the SPA" blog articles by Derick Bailey and the Getting Started SPA guide. I'm just looking for some guidance at this point. 

Hi, I created an index.html page with router and template loader as described here:
http://docs.telerik.com/kendo-ui/howto/load-templates-external-files

Now what I'm trying to do is to dynamically load the template data each time I navigate to a new url.

The first part of clicking on links and navigating with using the router works perfect. It even has a great caching mechanism so it won't load each template more than once. The question is what is the best practice to inject the server data into the template?

For example let's say that I'm looking at a homepage and I have a link to the customers page. Click on the link will switch view to the customers.html and will show the template page. Now I need to load all the customers. When and how do I do that? In the template page? I think that it would be better if the code that loads the customers will be in a separate js file that will load the data, populate the viewModel (am I right here?) and bind it to the page. Same questions when clicking on a specific user in order to edit it in a new popup - when and what is the best way to load the data?

I'm creating my first SPA using Kendo and working through the examples. Everything is working great.

I am very interested with the concept that some 'views' do not have to be part of the SPA and can be 'fetched' from a remote resource and a quick test it works lovely.  BUT as a v experienced C++ programmer of 20 years+ I am
used to thinking in the negative i.e. what could go wrong and how can I make the app seeminglessly continue for the
user.  So my big concern is that the remote view.html will not be reachable (ether missing, bad url, network down etc). 

A quick test, by setting the href in the tabstrip <a> to a bad URL, and when I can click on the button the app then hangs.  Not good! See:

http://jsbin.com/iQUSuMI/1/edit

I would like to be able to catch/detect the error and show a message to the user or ideally show an alternative default View that I do have in the SPA already.



(FYI my app has to support branding and I am proposing that the 'About, Help and 'News' pages are fetched from my clients web servers as HTML, so my clients can update this information without having to go back to me to release app updates etc.  I could use a datasource instead but was interested in the error handling anyway)

In the following scenario the url passed in the change event (e.url) is wrong.

If you have an index.html page with several routes like in the samples, for example /, /view1, /view2, ..., normally e.url in the change event returns /, /view1, /view2, ...

Let's say now that this page is is tracked by AddThis (or any service which works by adding tracking codes as hash values), when you call index.html#.Ut-VwxDFJ9N, the route returned by the router's change event is .Ut-VwxDFJ9N instead of /, which is wrong.

The router keeps a list of routes which it could use to check the route returned in the url property change event (e.url).

The problem
I need to implement Google CSE when navigating the /search?q=query route.
I navigate form the search input box to the search result page as follows:
I would like to implement my callback as follows: The Google script parses document.location to find the q param and display the results.
Unfortunately, at this stage (callback) the q param is not yet available in document.location.href.
There is no event that triggers after document.location.href is updated and the only way to get it work is to replace router.nivigate by window.location.assign or to use setTimeout.

How it should have been designed (IMHO)
document.location.href should already have been updated with the new route when the route callback function is triggered otherwise router.navigate should be banned when using any api that analyzes the query string.

In the OpenSource edition(kendoui.web.2013.1.319.open-source) , the main html for websushi example is missing. The Page can't be rendered.

I'm using kendo spa support in 2013.3.1119

If I want to have optional query parameters, it is not clear how to do that. I've got something to work, but it feels broken, or inconsistent.

See fiddle. 

I'm trying to support a route with no :id param, but has optional query params, like this:

I could only make this work by having a dummy first parameter since "undefined" is passed as arg1:

That seems like a bug. 

I found if I have an :id param in my route, like:

Then the optional query params are implicitly passed in the second argument. This is how I'd expect it to work (with or without an :id param).


In summary, should I be trying to take advantage of the automatic/implicit second argument that contains the query params? Or should I be including the (?:params) in my route url?

Am I missing something? Is there a bug here?


Thanks

Running build v2013.3.1119.  The drop down list functions normally when it is first displayed, but after switching out views with a re-render of the view the drop down list becomes disabled and cannot be clicked on or accessed.  I also noticed that a submit button loses its click event hander when the template is re-rendered.

Here is a jsfiddle example that replicates the issues: http://jsfiddle.net/markm1/x5q24/

I have tried different ways of creating the drop down, including using mvvm and the results are the same.  Any ideas?

Here is the html:
<script id="index1" type="text/x-kendo-template">
    <select id="ddMatter1" name="ddMatter" >
        <option>Select 1...</option>
        <option value="type-1">1</option>
        <option value="type-2">2</option>
    </select>   
<input id="search" name="search" type="submit" value="Search"/>
</script>
<div id="app"></div>
<br/><br/><br/>
<p>click render to break things</p>
<input id="render" type="submit" value="Render"/>

And here is the script:
var index1 = new kendo.View('index1');
$("#app").html(index1.render());
$("#ddMatter1").kendoDropDownList();
$("#search").click(function () { alert('search'); });
// render the view again to break things
$("#render").click(function () { $("#app").html(index1.render());
alert("Now the drop down does not work and the search button is no longer wired up")}); 

Hi!

I'm implementing a function that will be used as callback for several routes in my SPA. My challenge now is that I don't know how to get the route definition inside the function. For example:

var callback = function(){
   ///How to get the according route definition? For instance: "/login", "/main", "/items/:category/:id"
}

router.route("/login", callback);
router.route("/main", callback);
router.route("/items/:category/:id", callback);

Does the Kendo API provide a way to get that information?

Thanks.

I'm doing like:
layout.showIn("#content", myView);

Is there a way to assign a transition effect when navigating between views?