Created
August 11, 2013 10:34
-
-
Save kane-thornwyrd/6204344 to your computer and use it in GitHub Desktop.
A Backbone.js + Require.js + jQuery + Underscore + jQuery plugins + Backbone plugins freely borrowed and tweaked from http://backbonetutorials.com/organizing-backbone-using-modules/ .
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| <script src="js/libs/jquery/jquery.min.js"></script> | |
| <script src="js/libs/underscore/underscore.min.js"></script> | |
| <script src="js/libs/jquery.colorize/jquery.colorize.min.js"></script> | |
| <script src="js/libs/jquery.scroll/jquery.scroll.min.js"></script> | |
| <script src="js/libs/backbone.layoutmanager/backbone.layoutmanager.min.js"></script> | |
| <script data-main="main" src="js/libs/require/require.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="logo"> | |
| <h1>Modular Backbone</h1> | |
| </div> | |
| <div class="menu navbar"> | |
| <div class="navbar-inner"> | |
| <ul class="nav"> | |
| <li><a href="#" >Home</a></li> | |
| <li ><a href="#/projects" >Projects</a></li> | |
| <li><a href="#/users">Contributors</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="page"> | |
| Loading.... | |
| </div> | |
| <div id="footer"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul> | |
| <% _.each(projects, function(project){ %> | |
| <li><a href='<%= project.get("url") %>'><%= project.get("title") %></a></li> | |
| <% }); %> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| requirejs.config({ | |
| shim: { | |
| 'backbone': { | |
| //These script dependencies should be loaded before loading | |
| //backbone.js | |
| deps: ['underscore', 'jquery'], | |
| //Once loaded, use the global 'Backbone' as the | |
| //module value. | |
| //Pay attention to the case, backbone is the "false module" | |
| //described in this shim, Backbone is the actual global var | |
| //containing the real Backbone exec. | |
| exports: 'Backbone' | |
| }, | |
| 'underscore': { | |
| exports: '_' | |
| }, | |
| 'jquery': { | |
| exports: '$' | |
| }, | |
| 'jquery.colorize': { | |
| deps: ['jquery'], | |
| exports: '$.colorize' | |
| }, | |
| 'jquery.scroll': { | |
| deps: ['jquery'], | |
| exports: '$.scroll' | |
| }, | |
| 'backbone.layoutmanager': { | |
| deps: ['backbone'], | |
| exports: 'Backbone.layoutmanager' | |
| }, | |
| } | |
| }); | |
| //Each module of your app had to be wrapped by a call to define | |
| //to let require know which kind of module it need. | |
| //Keep paying attention to the case of each occurence of backbone ! | |
| //Here is your "main" function: | |
| define(['my_view'], function (myView) { | |
| myView.render(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| define([ | |
| 'jquery', | |
| 'underscore', | |
| 'backbone', | |
| 'text!list.html', | |
| 'jquery.scroll' | |
| ], | |
| //Note that I required jquery.scroll but omited it in the function parameters | |
| //because the plugin is already loaded an available throught the $ object. | |
| function ($, _, Backbone, tpl) { | |
| var myView = Backbone.View.extend({ | |
| el: $('#container'), | |
| render: function(){ | |
| // Using Underscore we can compile our template with data | |
| var data = {}; | |
| var compiledTemplate = _.template( tpl, data ); | |
| // Append our compiled template to this Views "el" | |
| //You should be able to use any plugin thing-a-magig here. | |
| this.$el.append( compiledTemplate ); | |
| } | |
| }); | |
| // Our module now returns our view | |
| return myView; | |
| } | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment