jquery mobile require.js和backbone

时间:2012-06-05 20:27:22

标签: jquery-mobile backbone.js requirejs

我真的在使用require.js和jquery mobile。我有一个基于松散的文件结构和基于

的加载模式

https://github.com/appboil/appboil-requirejs-backbonejs-jquerymobile-phonegap

但它已经过时了,我不得不对require 2.0版本进行调整。是否有社区接受使用jquery mobile,backbonejs和requirejs的方式?我想使用骨干网路由而不是jquery手机。此外,该模板有phonegap,我并不关心。

4 个答案:

答案 0 :(得分:27)

这是我使用的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();
        });
    });

由于我需要jquery用于jqm(jquery mobile),我将全部加载它们并且由于上面的填充码,依赖关系以正确的顺序加载。我实际上并没有将任何jqm变量传递给函数调用,它只传递$和App。下一个重要的部分是jqm-config文件:

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

您可以将jqm的所有preinit代码放在该文件中。毕竟,你应该能够使用jqm!

答案 1 :(得分:2)

您可以查看backbonejs boilerplate的最新版本,或查看christophe的backbone directory,其中包含启动基本应用所需的所有内容。

修改

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

答案 2 :(得分:2)

我刚刚在jQuery Mobile文档中添加了backbone.js,requirejs和jQuery Mobile小示例应用程序。如果这有帮助,请告诉我:

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

答案 3 :(得分:1)

如果你正在使用r.js,requirejs优化器,这是一个关于jquery.mobile和config问题的兴趣链接: https://github.com/jrburke/requirejs/issues/358