Backbone.js + Jquery Mobile 哈希导航不起作用答案

【问题标题】：Backbone.js + Jquery Mobile hash navigation not workingBackbone.js + Jquery Mobile 哈希导航不起作用
【发布时间】：2012-08-31 09:49:38
【问题描述】：

我目前正在开发基于模块化方法的移动应用程序：

http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules/

我在路由上遇到了一些问题，我不知道是什么导致了问题。

我的路由器定义如下：

    var AppRouter = Backbone.Router.extend({
    routes: {            
        'module1' : 'module1_home', // working        
        'module1view/:id' : 'module1_view',    //Not working                  
        // Default
        '*actions': 'defaultAction' //Working
    },
    initialize:function () {
        // Handle back button throughout the application
        $('.back').live('click', function(event) {
            window.history.back();
            return false;
        });
        this.firstPage = true;
    },
    module1_view : function(id)
    {        
        var module1 = MyApp.module('module1');
        var view = new module1.DisplayView;        
        this.changePage(view);            
    },    
    defaultAction : function () {
        var home = MyApp.module('home');
        var view = new home.DefaultView;  
        this.changePage(view);
    },
    changePage:function (page) {        
        $(page.el).attr('data-role', 'page');
        page.render();
        $('body').append($(page.el));
        var transition = 'slide';

        if (this.firstPage) {
            transition = 'none';
            this.firstPage = false;
        }
        $.mobile.changePage($(page.el), {
            changeHash:true, 
            transition: transition
        });
    }
});

这里是示例 URL 和结果

http://localhost:12345/myapp/ => shows the default view
http://localhost:12345/myapp/index.html => shows the default view
http://localhost:12345/myapp/#module1 => shows module1 home view
http://localhost:12345/myapp/index.html#module1 => shows module1 home view

http://localhost:12345/myapp/#module1view/123 => url changes to http://localhost:12345/myapp/module1view/123 and displays the default view
http://localhost:12345/myapp/index.html#module1/123 => url changes to http://localhost:12345/myapp/module1view/123 and displays the default view

我还使用

停用了 JQM 导航

jQuery(function($) {    
    $(document).on("mobileinit", function () {
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;

        // Remove page from DOM when it's being replaced
        $('div[data-role="page"]').live('pagehide', function (event, ui) {
            $(event.currentTarget).remove();
        });
    });          
});

我也在这里使用 WAMP 作为 Web 服务器，并使用 firefox 作为测试浏览器。

有没有人有类似的问题，可以给我一些关于如何解决这个问题的见解？

更新#1：一些补充信息，这里没有调用警报：

module1_view : function(id)
    { 

        alert(id);
    }

因此，我可能认为代码中出现了一些问题。

【问题讨论】：

这个没有答案？我的想法是 Apache 在某种程度上修剪了 URL 中的 #，但如果有设置，我无法掌握如何更改此设置。

标签： jquery jquery-mobile backbone.js

【解决方案1】：

我能够找到问题所在。似乎将 JQM 设置放入：

jQuery(function($) {    });
or
$(function() { });

没有触发文档 $(document).on("mobileinit", function () { });因为某些原因。我仍然需要对此进行调查。

但是删除会触发命令，并且 JQM 导航被禁用，我可以正常使用骨干路由器。

【讨论】：