为什么使用 requirejs 2 会阻止我的骨干网/jQuery 移动应用程序工作？答案

【问题标题】：Why does using requirejs 2 stop my backbone / jQuery mobile app working?为什么使用 requirejs 2 会阻止我的骨干网/jQuery 移动应用程序工作？
【发布时间】：2014-09-28 09:57:52
【问题描述】：

我有一个使用 jQuery Mobile、Backbone.js 和 require.js 构建的非常简单的概念验证应用程序。

我正在使用 Backbone 的路由器，并且禁用了 jQuery Mobile 的路由。效果很好。

我正在使用 require.js 1.04。但是：当我使用 requirejs 2.1.14 时，我似乎无法禁用 jQuery Mobile 的路由，因此 Backbone 的路由停止工作。想不通。

如果我删除 jQuery mobile，以下代码可以工作，但如果我将 jQuery mobile 放回，它会停止工作。同样，它适用于 Require.js 1.0.4，但不适用于 require.js 2.1.14：

index.html：

<html>
    <body>
        <a href="#posts/1">Click Here</a>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

main.js

require.config({
    paths : {
        backbone : 'libraries/backbone/backbone',
        underscore : 'libraries/underscore/underscore',
        jquery : 'libraries/jquery/jquery-1.7.1',
        jqm : 'libraries/jquery.mobile/jquery.mobile',
        router: 'router'
    },
    shim: {
        jqm: {
            exports: 'jqm',
            deps: ['jquery']
        },
        underscore: {
            exports: 'underscore'
        },
        backbone: {
            exports: 'backbone',
            deps: ['jquery', 'underscore']
        }
    }
});

require(
    ['jquery', 'jqm', 'underscore', 'backbone', 'router'],
    function ($, $$, underscore, Backbone, router) {
        $.mobile.ajaxEnabled = false;
        $.mobile.linkBindingEnabled = false;
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
        $.mobile.changePage.defaults.changeHash = false;

        router.init();
    });

router.js

define(['jquery', 'jqm', 'underscore', 'backbone'],
function($, $$, _, Backbone) {

    var init = function () {
            $.mobile.ajaxEnabled = false;
            $.mobile.linkBindingEnabled = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
            $.mobile.changePage.defaults.changeHash = false;

            var AppRouter = Backbone.Router.extend({
                routes: {
                    "posts/:id" : "getSomePost",
                    "*action": "defaultRoute"
                },
                getSomePost: function(id) {
                    alert( "Get post number " + id ); 
                },
                defaultRoute: function( actions ){
                    console.log('Action: ' + actions );
                }
            });

            // Instantiate the backbone router
            var app_router = new AppRouter();

            // Start Backbone history
            Backbone.history.start();


    };

    return { init : init };
});

这个问题严重烧我的面条！！

当我加载应用程序时，我看到一个链接显示“单击此处”。当应用程序使用 requirejs-1.0.4（或不使用 jquery mobile）时，它可以工作，我收到一条警告说“获取帖子编号 1”，并且 URL 如下所示：

http://myapp.dev/src/#posts/1

但是在使用 requirejs-2.1.14 和 jQuery Mobile 时，我的 URL 很快变成了这样：

http://myapp.dev/src/posts/1

什么也没发生。

救命！

【问题讨论】：

至少升级 jQuery 到 1.9。
你能把我链接到这个压缩包吗？懒得设置它;)
嘿奥马尔，我更新到 jQuery 1.11 - 仍然没有乐趣:(

标签： jquery-mobile backbone.js mobile requirejs

【解决方案1】：

我终于找到了这个问题的答案。问题是 jQuery Mobile 配置的时机。根据 jQuery Mobile 文档：

因为 mobileinit 事件会立即触发，所以您需要 在加载 jQuery Mobile 之前绑定您的事件处理程序

所以我像这样重写了 main.js：

require.config({
    paths : {
        backbone : 'libraries/backbone/backbone',
        underscore : 'libraries/underscore/underscore',
        jquery : 'libraries/jquery/jquery-1.7.1',
        jqmconfig : 'jquerymobile.config',
        jqm : 'libraries/jquery.mobile/jquery.mobile',
        router: 'router'
    },
    shim: {
        jqm: {
            exports: 'jqm',
            deps: ['jquery', 'jqmconfig']
        },
        underscore: {
            exports: 'underscore'
        },
        backbone: {
            exports: 'backbone',
            deps: ['jquery', 'jqm', 'underscore']
        }
    }
});

require(
    ['jquery', 'backbone', 'jqmconfig', 'jqm', 'router'],
    function ($, Backbone, jqmconfig, $$, router) {
        router.init();
});

并添加了一个名为 jquerymobile.config.js 的新文件：

define(['jquery'], function ($) {
    $(document).on('mobileinit', function () {
        // Prevents all anchor click handling
        $.mobile.linkBindingEnabled = false

        // Disabling this will prevent jQuery Mobile from handling hash changes
        $.mobile.hashListeningEnabled = false

        $.mobile.ajaxEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
});

此代码在 jQuery 加载后触发，但 BEFORE jQuery Mobile 已加载，这是关键！

作为参考，这是帮助我弄清楚的博客文章：

http://www.justinmccandless.com/blog/Yeoman%2C+Requirejs%2C+jQuery+Mobile%2C+Backbone%2C+and+a+Lot+of+Config+Problems

【讨论】：