jquery mobile require.js 和主干 [英] jquery mobile require.js and backbone

问题描述

我真的在为 require.js 和 jquery mobile 苦苦挣扎.我有一个基于

I'm really struggling with require.js and jquery mobile. I have a loosely based file structure and loading pattern based off of

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

但它很旧，我不得不为 require 2.0 版本进行调整.是否有社区接受的同时使用 jquery mobile、backbonejs 和 requirejs 的方式?我想使用主干路由而不是 jquery 移动设备.此外，该模板具有我不关心的 phonegap.

but it's old and I had to make adaptions for the require 2.0 version. Is there a community accepted way of using jquery mobile, backbonejs and requirejs together? I'd like to use backbone's routing and not jquery mobiles. Additionally, that template has phonegap, which i'm not concerned with.

推荐答案

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

Here is the main.js file I use...

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 正确加载(并实际运行)非常重要.这部分:

The last bit is very important to get JQM to load correctly (and actually function). This part:

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

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

Since i need jquery for jqm (jquery mobile), i'll load them all and thanks to the shim code above, the dependencies are loaded in the correct order. I don't actually pass any jqm variable into the function call, which only passes $ and App. The next important part is the jqm-config file:

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

您可以将 jqm 的所有预初始化代码放在该文件中.毕竟，你应该可以使用jqm！

You can place all of your preinit code for jqm in that file. After all that, you should be able to use jqm!

这篇关于jquery mobile require.js 和主干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！