CODEWITHSUNDEEP
cordovabackbone.jstextrequirejs
Diego Castiblanco
Diego Castiblanco

Reputation: 43

require.js, backbone and cordova issue

I have a problem when using apache cordova version 2.7. In the browser the code seems to work fine as i run it from xampp. but when I try to compile to IOS it just doesn't work.

I think the issue might be related to the require.js text plugin which is used to load handlebars templates and html files because of the file protocol restrictions on loading files.

I also think it might be something related to not listening for device ready event but I'm not sure how to do it correctly in this setting.

Our main.js code is:

require.config({
   shim: {
      underscore: {
         exports: '_'
      },
      backbone: {
         deps: ['underscore', 'jquery'],
         exports: 'Backbone'
      },
      handlebars: {
         exports: 'Handlebars'
      },
      flipBook: {
         deps: ['jquery']
      },
      touchSlider: {
         deps: ['jquery']
      }
   },
   paths: {
      jquery: 'libs/jquery',
      jquerymobile: 'libs/jquery.mobile',
      underscore: 'libs/underscore',
      backbone: 'libs/backbone',
      handlebars: 'libs/handlebars',
      cordovaios: 'libs/cordova-2.7.0',
      text: 'libs/text',
      flipBook: 'plugins/flipbook.min',
      touchSlider: 'plugins/jquery.touchSlider.min'
   }
});

// Includes File Dependencies
require(["cordovaios", "jquery", "backbone", "routers/router"], function(
   cordova, $, Backbone, Router) {
   // Set up the "mobileinit" handler before requiring jQuery Mobile's module
   $(document).on("mobileinit", function() {
      window.App = {
         Models: {},
         Collections: {},
         Views: {},
         Routers: {}
      };
      $.mobile.linkBindingEnabled = false;
      $.mobile.hashListeningEnabled = false;

      $(document).on('pagehide', 'div[data-role="page"]', function(event, ui) {
         $(event.currentTarget).remove();
      });
      $(document).on('pagebeforeshow', 'div[data-role="page"]', function () {
         $.mobile.showPageLoadingMsg();
      });
      $(document).on('pageshow', 'div[data-role="page"]', function () {
         $.mobile.hidePageLoadingMsg();
      });
      document.addEventListener('touchmove', function (e) {
         e.preventDefault();
      });
   });

   require(["jquerymobile"], function () {
      // Instantiates a new Backbone.js Mobile Router
      new Router();
   });
});

Upvotes: 1

Views: 1303

Answers (1)

Gamblor
Gamblor

Reputation: 21

In your config you shouldnt have to specify the text plugin. I think all you need to do is set the base url and have the plugin there. I have a project where I reference 

require.config({
     baseUrl: 'asesets/js/libs'
});

Then I keep the text plugin in there and it picks up the reference automatically. The downside to this though is you have to change some of your path reference for other things.

The second issue would be the document being ready. I havent tested this yet as my application works without checking to see if the device is ready since the JS is at the bottom of my HTML. However there are some other areas with phonegap where I think you must check that first. So I think(again untested) that all you need to do is use requirejs load event. http://requirejs.org/docs/api.html#pageload

Hope that helps. I will probably be testing out the document ready tonight and will update if it works.

Upvotes: 2

Related Questions