如何正确实现Jquery Mobile Router插件

时间:2012-08-01 11:44:18

标签: javascript jquery jquery-mobile routes

我一直很高兴使用JQM一段时间了。但是我最近开始了一个新项目,该项目要求将动态创建的页面推送到历史记录中,其内容由url参数确定。我将向您展示我最初是如何使用JQM接近控制器以及我如何尝试接近路由器插件。

这就是我以前为JQM编写所有控制器的方法:

myApp.foo.controller = (function($){

    "use strict";

    var $page;

    var init = function()
    {
        $page = $("#foo-page");
        applyBindings();
    };

    var applyBindings = function()
    {       
        // Page transition events
        $page.bind("pagebeforeshow", onPageBeforeShow);
    };

    var onPageBeforeShow = function()
    {

    };

     return  {
        init: init
     }

})(jQuery);

$("#foo-page").live("pageinit", function(e)
{
    myApp.foo.controller.init();
});

所以我现在正在使用JQM recommended routing plugin。我不使用脊柱或骨干。而且我不想把这个错误视为应用程序的基础。所以我加载了所有控制器,然后加载我的router.js文件。

这给了我期待的行为:

    var router = new $.mobile.Router([
        {"#foo-page": {events:"i", handler: myApp.foo.controller.init}},
        {"#foo-page": {events:"s", handler: myApp.foo.controller.onPageShow}},          

        {"#dynamic-foo(?:[?/](.*))?": {events:"i", handler: myApp.dynamicFoo.controller.init}},
        {"#dynamic-foo(?:[?/](.*))?": {events:"bs", handler: myApp.dynamicFoo.controller.onPageBeforeShow}},
    ]);

但这是使用路由器插件的正确方法吗?因为我阅读了文档,作者似乎使用路由器对象作为实际控制器。

要清楚,这对我有用我只是不确定这是否真的是路由的想法,或者这可能是错误的方法?

1 个答案:

答案 0 :(得分:3)

不用担心,没有“正确的方法”来使用路由器,你的方法是正确的。

另一种做同样事情的方法是:

var router = new $.mobile.Router([
    {"#foo-page": {events:"i", handler: "init"}},
    etc
],myApp.foo.controller);

这只是一个品味问题。