├── css ├── images │ ├── ajax-loader.png │ ├── icons-18-black.png │ ├── icons-18-white.png │ ├── icons-36-black.png │ └── icons-36-white.png └── jquery.mobile-1.0.1.min.css ├── readme.md ├── js ├── jqm-config.js └── main.js ├── index.html └── lib ├── underscore-min.js ├── backbone-min.js └── jquery.mobile-1.0.1.min.js /css/images/ajax-loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ace/backbone-jquerymobile/master/css/images/ajax-loader.png -------------------------------------------------------------------------------- /css/images/icons-18-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ace/backbone-jquerymobile/master/css/images/icons-18-black.png -------------------------------------------------------------------------------- /css/images/icons-18-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ace/backbone-jquerymobile/master/css/images/icons-18-white.png -------------------------------------------------------------------------------- /css/images/icons-36-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ace/backbone-jquerymobile/master/css/images/icons-36-black.png -------------------------------------------------------------------------------- /css/images/icons-36-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ace/backbone-jquerymobile/master/css/images/icons-36-white.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Backbone.js + jQuery Mobile # 2 | 3 | A sample application that shows how to combine [Backbone.js](http://documentcloud.github.com/backbone/) (for the application structure and “routing”) and [jQuery Mobile](http://jquerymobile.com/) (for its styles and widgets). 4 | 5 | This sample application is documented [here]( http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile) -------------------------------------------------------------------------------- /js/jqm-config.js: -------------------------------------------------------------------------------- 1 | $(document).bind("mobileinit", function () { 2 | $.mobile.ajaxEnabled = false; 3 | $.mobile.linkBindingEnabled = false; 4 | $.mobile.hashListeningEnabled = false; 5 | $.mobile.pushStateEnabled = false; 6 | 7 | // Remove page from DOM when it's being replaced 8 | $('div[data-role="page"]').live('pagehide', function (event, ui) { 9 | $(event.currentTarget).remove(); 10 | }); 11 | }); -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | window.HomeView = Backbone.View.extend({ 2 | 3 | template:_.template($('#home').html()), 4 | 5 | render:function (eventName) { 6 | $(this.el).html(this.template()); 7 | return this; 8 | } 9 | }); 10 | 11 | window.Page1View = Backbone.View.extend({ 12 | 13 | template:_.template($('#page1').html()), 14 | 15 | render:function (eventName) { 16 | $(this.el).html(this.template()); 17 | return this; 18 | } 19 | }); 20 | 21 | window.Page2View = Backbone.View.extend({ 22 | 23 | template:_.template($('#page2').html()), 24 | 25 | render:function (eventName) { 26 | $(this.el).html(this.template()); 27 | return this; 28 | } 29 | }); 30 | 31 | var AppRouter = Backbone.Router.extend({ 32 | 33 | routes:{ 34 | "":"home", 35 | "page1":"page1", 36 | "page2":"page2" 37 | }, 38 | 39 | initialize:function () { 40 | // Handle back button throughout the application 41 | $('.back').live('click', function(event) { 42 | window.history.back(); 43 | return false; 44 | }); 45 | this.firstPage = true; 46 | }, 47 | 48 | home:function () { 49 | console.log('#home'); 50 | this.changePage(new HomeView()); 51 | }, 52 | 53 | page1:function () { 54 | console.log('#page1'); 55 | this.changePage(new Page1View()); 56 | }, 57 | 58 | page2:function () { 59 | console.log('#page2'); 60 | this.changePage(new Page2View()); 61 | }, 62 | 63 | changePage:function (page) { 64 | $(page.el).attr('data-role', 'page'); 65 | page.render(); 66 | $('body').append($(page.el)); 67 | var transition = $.mobile.defaultPageTransition; 68 | // We don't want to slide the first page 69 | if (this.firstPage) { 70 | transition = 'none'; 71 | this.firstPage = false; 72 | } 73 | $.mobile.changePage($(page.el), {changeHash:false, transition: transition}); 74 | } 75 | 76 | }); 77 | 78 | $(document).ready(function () { 79 | console.log('document ready'); 80 | app = new AppRouter(); 81 | Backbone.history.start(); 82 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |