jQuery Mobile、Require.js和Backbone

Question

jQuery Mobile、Require.js和Backbone

16

我在使用 require.js 和 jquery mobile 时遇到了很多问题。我的文件结构和加载模式是基于https://github.com/appboil/appboil-requirejs-backbonejs-jquerymobile-phonegap的，但那个项目已经过时了，而我又不得不为 require 2.0 版本做出调整。是否有社区认可的方法可以让 jquery mobile、backbonejs 和 requirejs 一起使用？我想使用 backbone 的路由而不是 jquery mobile 的路由。此外，那个模板还包含 phonegap，但我并不关心它。

- Sneaky Wombat

为了所有神圣和纯洁的事物，我可能已经想出了方法。我会进行测试，如果它确实有效，我将在GitHub上发布源代码并提供链接。 - Sneaky Wombat

4个回答

2

我刚刚在jQuery Mobile文档中添加了一个backbone.js、require.js和jQuery Mobile的小例子应用程序。如果这有帮助，请告诉我。

http://demos.jquerymobile.com/1.4.4/backbone-requirejs/backbone-require.html

- Greg Franko

那个页面确实帮了我很多，但现在它正在重定向到新的jQuery 1.3文档。如果可能的话，请恢复它。 - Alan Illing

已更新。如果您仍然有问题，请告诉我。 - Greg Franko

我在那个例子中没有看到backbone，只有require.js。 - Myer

@PeterNore 你读完整篇文章了吗？此外，这是示例应用程序的源代码：https://github.com/jquery/jquery-mobile/tree/master/demos/examples/backbone-require - Greg Franko

@GregFranko - 抱歉，我对RequireJS还不熟悉，没意识到require脚本标签上的data-main="js/mobile"意味着我可以在js/mobile.js中找到所包含的依赖项的引用。谢谢！ - Myer

我相信这些更新请求很烦人 - 但是你能否将其更新到2014年？ - IcedDante

2

您可以查看backbonejs boilerplate的最新版本，或者查看Christophe的backbone directory，其中包括启动基本应用程序所需的所有必要内容。

编辑

https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template

- dhaval

不幸的是，这不是使用jqm的示例。 - Sneaky Wombat

在 backbone-directory 中有一个子文件夹，它仅使用jquery mobile。 - dhaval

糟糕，我的眼睛漏掉了你回答中的第二个链接。不过并没有使用require.js，但那是一个有趣的例子。 - Sneaky Wombat

1

如果您正在使用r.js、requirejs优化器，这是一个关于jquery.mobile和配置问题的有趣链接: https://github.com/jrburke/requirejs/issues/358

- Armando

2

这解决了我的问题。特别要注意文档中关于shim的注释：“shim配置仅设置代码关系。要加载作为shim配置一部分或使用shim配置的模块，需要使用正常的require/define调用。仅设置shim本身不会触发代码加载。” - Jason

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sneaky Wombat · Accepted Answer

这是我使用的 main.js 文件...

require.config({
  baseUrl: "/js/",
  paths: {
    jquery: 'libs/jquery/jquery-1.7.1',
    'jquery.mobile-config': 'libs/jqm/jquery.mobile-config',
    'jquery.mobile': 'libs/jqm/jquery.mobile-1.1.0',
    'jquery.mobile.asyncfilter': 'libs/jqm/asyncfilter',
    underscore: 'libs/underscore/underscore-1.3.3',
    backbone: 'libs/backbone/backbone-0.9.2',
    templates: '../templates'
  },
  shim: {
          'underscore': {
            exports: "_"
          },
          'backbone': {
              //These script dependencies should be loaded before loading
              //backbone.js
              deps: ['jquery','underscore'],
              //Once loaded, use the global 'Backbone' as the
              //module value.
              exports: 'Backbone'
          },
          'jquery.mobile-config': ['jquery'],
          'jquery.mobile': ['jquery','jquery.mobile-config'],
          'jquery.mobile.asyncfilter': ['jquery.mobile'],
        }
});

require([
  'jquery',
  'app',
  'jquery.mobile','jquery.mobile.asyncfilter'
], function( $, App ){
    $(function(){
      App.initialize();
    });
});

最后一点非常重要，以使JQM正确加载（并实际运行）。这部分内容：

require([
      'jquery',
      'app',
      'jquery.mobile','jquery.mobile.asyncfilter'
    ], function( $, App ){
        $(function(){
          App.initialize();
        });
    });

由于我需要使用jqm（jquery mobile）, 我将加载它们所有，并且由于以上的shim代码，依赖项会按照正确的顺序加载。实际上，在函数调用中，我并没有传递任何jqm变量，只传递了$和App。下一个重要部分是jqm-config文件：

define(['jquery'], function ($) {
      $(document).on("mobileinit", function () {
          $.mobile.ajaxEnabled = false;
          $.mobile.linkBindingEnabled = false;
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
      });
});

您可以将所有的jqm预初始化代码放在该文件中。完成所有这些步骤后，您应该可以使用jqm！