在Ext JS 5应用程序中如何使用路由

Posted 周日, 06/22/2014 - 16:16 by admin

简介

Ext JS 5是一个重要的发布版本，它提供了许多新特性来创建丰富的、企业级的Web应用程序。MVVM和双向数据绑定为开发人员承担了大量的繁重工作。在Ext JS 5种，另一个新特性就是路由，它可以在控制器内轻松的管理历史记录。前进和后退按钮是每个浏览器都会拥有的公共用户接口，现在，使用Ext JS 5在单页面应用程序中处理导航变得相当简单了。

Ext JS 5路由

在Ext JS，已经可以使用Ext.util.Histroy类来处理历史记录的变化，但在Ext JS 5，这个处理变得更容易和灵活。路由提供了一种更易于配置的方式来将散列值映射到控制器的方法，这包括使用参数和之前的行为来控制路由执行的流程，而在后端则使用Ext.util.History来处理。下面来看一个简单的例子：

    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
 
        routes : {
            'home' : 'onHome'
        },
 
        onHome : function() {}
    });

在路由对象中，关键字“home”就是要匹配的散列值，而值“onHome”就是控制器中的方法，当散列只匹配的时候，就会执行该方法（例如：http://localhost#home）。要在控制器内改变散列值，可以使用redirectTo方法：

 this.redirectTo(‘home’); //redirects to http://localhost#home

这将会将URL的散列值修改为“#home”，然后会执行MyApp.controller.Main控制器实例中路由所定义的的onHome方法。如果有多个控制器都匹配相同的散列值，执行的顺序将会根据应用程序实例的控制器数组中所定义的顺序执行。

散列值和参数

散列值还可以包含参数，路由可轻易的将他们作为参数传递给控制器的方法。带参数的散列值看起来像“#user/1234”，其中，1234是用户的ID，会被作为一个参数。可以通过以下方法来为控制器定义散列值：

 
    Ext.define(‘MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
 
        routes : {
            'user/:id' : 'onUser'
        },
 
        onUser : function(id) {}
    });

在为路由配置一个预期的参数的时候，需要在参数名称前添加一个冒号，在以上例子中的参数就是“:id”，路由将会把匹配的任何值作为传递参数并传递给onUser方法。传递给控制器方法的参数的顺序与路由定义时的顺序相同。

还可以使用正则表达式来控制要匹配的散列值。在用户ID的示例中，ID只能是数字值，而不允许是其他值，为了控制匹配，在路由中可以使用conditions配置项：

 
    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
 
        routes : {
            'user/:id' : {
                action     : 'onUser',
                conditions : {
                    ':id' : '([0-9]+)'
                }
            }
        },
 
        onUser : function(id) {}
    });

示例中演示了两样东西：路由的定义可以是一个对象，action属性对应的是控制器的方法，以及使用conditions配置项。配置项conditions是一个包含参数和正则表达式字符串的对象。采用正则表达式字符串，而不是正则表达式的原因是，路由会根据路由内的参数创建一个默认的正则表达式，而conditions配置项的作用就是重写默认的正则表达式字符串。默认的正则表达式字符串是“([%a-zA-Z0-9\\-\\_\\s,]+)”。

如果没有匹配路由的散列值，就会在应用程序中触发unmatchedroute事件，该事件可在应用程序中或控制器中进行监听，无论在哪里，监听方式都是一样的。以下是在控制器中监听的示例：

    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
 
        listen : {
            controller : {
                '*' : {
                    unmatchedroute : 'onUnmatchedRoute'
                }
            }
        },
 
        onUnmatchedRoute : function(hash) {}
    });

有时候，为了避免路由继续执行或等待ajax请求这样的异步操作而延迟执行，需要将路由的处理过程挂起。为了实现这个，可以在路由中定义before操作，且可将路由中定义的任何参数传递给它。以下是一个使用ajax请求的示例，且在请求完成后继续执行路由：

    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
 
        routes : {
            'user/:id' : {
                action     : 'onUser',
                before     : 'beforeUser',
                conditions : {
                    ':id' : '([0-9]+)'
                }
            }
        },
 
        beforeUser : function(id, action) {
            Ext.Ajax.request({
                url     : '/user/confirm',
                params  : {
                    userid : id
                },
                success : function() {
                    action.resume();
                },
                failure : function() {
                    action.stop();
                }
            });
        },
 
        onUser : function(id) {}
    });

方法beforeUser会象onUser方法一样接收id参数，不过，它还可获取到一个action参数。参数action包含有resume和stop方法用来控制路由的执行。执行action的resume方法，如Ext.Ajax.request的success处理中的那样，将会恢复路由的执行，这样就可实现路由的异步行为。执行action的stop方法，正如在failure回调函数中卡你打那样，会停止当前路由的执行。如果将true传递给stop方法，队列中的所有路由都会停止执行，这样就可以对路由实现完整的控制。

Ext JS应用程序可能会变得很大很复杂，而且有时候可能会希望在同一时间激活多个散列值。Ext JS 5有能力去处理多个散列值并分别去执行他们。单独的散列值会被沙盒化，这意味着如果需要取消一个路由，可以将true传递给action.resume方法，这就可以阻止该散列值的其他路由，而其他的散列值会继续执行。每一个散列值都需要进行分隔，如以下示例的散列值：

#user/1234|message/5ga

路由会将散列值拆分为“user/1234”和“message/5ga”。路由会根据user的值去找到所有匹配的路由并执行任何匹配的路由。如果没有匹配散列值的路由，就会触发unmatchedroute事件。接下来，路由将会根据message的值来寻找任何匹配的路由并执行他们。如果没有匹配值的路由，将会触发unmatchedroute事件。