Problem with passing multiple parameters in url with Sencha-touch MVC routing

[jartem]

Hi,

I stuck in a place where I need to pass several parameters in url while using Ext.Router & built-in MVC in Sencha-touch. Having initialized routing as below:

Ext.Router.draw(function (map) {
map.connect(':controller/:action/:parameter');
}

entering url "localhost/#users/show/3" executes 'show' action in 'users' controller with "3" as passed parameter.
works just fine, until several parameters need to be passed to an action for example "localhost/#users/search/type=3&quote=john", I would expect that 'search' action in 'users' controller would be executed with string parameter as "type=3&quote=john", but routing does not call any action if any spacial char is passed as parameter (':', '=',' &').
I assume this is a restricted by routing, but I dont get it why.
Other option is to register routes as following:

map.connect(':controller/:action/:parameter1/:parameter2/:parameter3/:parameter4');

but I dont find it the best practice (for example when the number of parameters is dynamic)

Could anyone explain this to me how multiple parameters should be passed to action using routing, assuming that each parameter should be recognizable by its name.

cheers

[szwejkc]

Sorry my friend. I don't have an answer. I really want to know the solution for this problem. Very good question!

[suzzer99]

Does anyone know why I can't find Router in either the EXT JS or Sencha Touch API docs? Very strange.

[Ion Tichy]

The docs have a few small holes in them. 'Viewport' is another missing class.

[parseroo]

I can't say what the purpose is, but probably mostly to be simpler and more integrated with the basic 'app' model they have.

You can get the '&foo=bar' part to come through the Router into the controller by changing 'Ext.util.Route::createMatcherRegex' to allow the characters in a trailing (potentially ':rest' ) attribute and use that with a route like:

        map.connect(':controller/:action/:rest');

for 'localhost/#users/search/type=3&quote=john' or change the last slash to a '&' and you could use 'localhost/#users/search&type=3&quote=john' which might be a bit more standard.

    createMatcherRegex: function(url) {
        
        var paramsInMatchString = this.paramsInMatchString,
            length = paramsInMatchString.length,
            i, cond, matcher;
        
        for (i = 0; i < length; i++) {
            cond    = this.conditions[paramsInMatchString[i]];
            if (i == length - 1) {
                matcher = Ext.util.Format.format("({0})", cond || "[%a-zA-Z0-9\\_\\s,\\&\\=]+");
            } else {
                matcher = Ext.util.Format.format("({0})", cond || "[%a-zA-Z0-9\\_\\s,]+");
            }

            url = url.replace(new RegExp(paramsInMatchString[i]), matcher);
        }

        
        return new RegExp("^" + url + "$");
    }

[jartem]

thanks a million, that helps a lot,

[gcallaghan]

I've typically seen frameworks with "clean" urls like django and apache mod rewrite have a route for every parameter, ie

route/param1
route/param1/param2
route/param1/param2/param3
etc

Server side languages typically give you access to the get or post arguments in a global. for javascript you could use a technique like...

http://www.netlobo.com/url_query_string_javascript.html


I try and avoid directly hacking on the source code when I can

[parseroo]

The format '?foo=value1&bar=value2' is a standard clean url and is far more reliable, tolerant to changes, and more flexible than a full path like /value1/value2. Especially when you get to 'value5'! The link you reference even has exactly that format '?bob=123&frank=321...' in its example. Usually routing is done off everything up to the '?' where the rest are just passed in parameters. Effectively my change to the source adds that feature (using the first '&' to identify the rest) as a recommended improvement to Sencha routing.

[gcallaghan]

Hey no worries parseroo, just suggesting another way and providing another point of view.

 '?foo=value1&bar=value2'

is definitely a valid url, though not clean as in user friendly.
http://en.wikipedia.org/wiki/Clean_URL

The problem with GET arguments is that they are essentially arbitrary. Routes and explicit parameter matching increase the security/stability of the code.
http://en.wikipedia.org/wiki/Query_s...y_vs._security

reliable, tolerant to changes, and more flexible than a full path like /value1/value2.

I don't necessarily think that the flexibility is such a virtue. For secure code you have to check the parameter somewhere, whether its in the route or the controller. Adding a check to the controller or another route seem to be the same amount of work. Its never a good Idea to run arbitrary input.

I don't see how routes are unreliable. They seem to be common practice nowadays.
http://guides.rubyonrails.org/routing.html
http://docs.djangoproject.com/en/1.2/topics/http/urls/
http://drupal.org/getting-started/clean-urls
http://codex.wordpress.org/Using_Permalinks

While these methods don't disable get arguments, they do discourage their use.


But you are right, having the router break on a query string seems like a bug. If nothing else, it could ignore the query string and log a message.

Until it gets fixed you could use the Ext.override method to temporarily patch in the required functionality without hacking the source which may hinder any upgrade process.

[Bucs]

@parseroo, I am having some issues trying to get what you are saying to work for me. Can you elaborate on how you are declaring the route to accept parameters, and then how are you referencing the params from inside the controller action?

Your route declaration is sort of a catchall it looks like whereas I have seen most of the ones in the examples provide a controller mapping config object like so:

    map.connect("products/list", { controller: 'ProductController', action: 'list'});

How would i adjust the above to include params like you say that would get passed into the controller and be accessible? And how are you accessing them once inside the action, by parsing the historyUrl?

Also, adding ANYthing extra to the routes in the routes.js file seems to break the history connection for me, as it doesn't allow me to return to the list page and fire the "list" action in the controller if I had gone one level deeper (say a details page), and then tried to return with the browser back button. I assuming this is because the params tacked onto the end of the route break the connection...almost as if the ":param" is not distinguished from the route at all in the routing process.

Passing params in the Touch MVC pattern needs a LOT of work imo, and no one (including Sencha) seems to know much about how to achieve this.