This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Apr 18th, 2012  |  syntax: HTML 5  |  size: 6.41 KB  |  views: 136  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Backbone Test</title>
  5.  
  6.         <script type="text/javascript" src="/javascript/jquery.js"></script>
  7.         <script type="text/javascript" src="/javascript/underscore.js"></script>
  8.         <script type="text/javascript" src="/javascript/backbone.js"></script>
  9.  
  10.     </head>
  11.     <body>
  12.         <div id="header">header</div>
  13.         <div id="main"></div>
  14.         <div id="footer">footer</div>
  15.         <script type="text/javascript">
  16.             /**
  17.              * /javascript/application/unlocked.js
  18.              */
  19.             var unlocked =
  20.             {
  21.                 //initialization code
  22.                 initialize: function(options)
  23.                 {
  24.                     this.options = _.extend(
  25.                     {
  26.                         historyOptions:
  27.                         {
  28.                             pushState: true
  29.                         }
  30.                     }, options);
  31.  
  32.                     Backbone.history.start(this.options.historyOptions);
  33.                 },
  34.  
  35.                 //common methods
  36.                 loadRemoteTemplates: function(templates, async)
  37.                 {
  38.                     var self = this;
  39.  
  40.                     if(_(templates).isObject())
  41.                     {
  42.                         async = self.defaultValue(async, true);
  43.  
  44.                         _(templates).each(function(url, key)
  45.                         {
  46.                             $.ajax(
  47.                             {
  48.                                 url: url,
  49.                                 async: async,
  50.                                 success: function(response)
  51.                                 {
  52.                                     self.loadTemplate(key, response)
  53.                                 }
  54.                             });
  55.                         });
  56.                     }
  57.                 },
  58.  
  59.                 loadTemplate: function(key, template)
  60.                 {
  61.                     this.templates[key] = _.template(template);
  62.                 },
  63.  
  64.                 renderTemplate: function(key, context)
  65.                 {
  66.                     return this.templates[key](context);
  67.                 },
  68.  
  69.                 defaultValue: function(variable, defaultValue)
  70.                 {
  71.                     return (!_(variable).isUndefined()) ? variable : defaultValue;
  72.                 },
  73.  
  74.                 //common members
  75.                 restUrlPart: '/api/v1',
  76.                 templates: {},
  77.  
  78.                 //modules code
  79.                 module: function()
  80.                 {
  81.                     var modules = {};
  82.  
  83.                     return function(name)
  84.                     {
  85.                         if(modules[name])
  86.                         {
  87.                             return modules[name];
  88.                         }
  89.  
  90.                         return modules[name] = {
  91.                             views: {},
  92.                             models: {},
  93.                             collections: {},
  94.                             routes: {}
  95.                         };
  96.                     };
  97.                 }()
  98.             };
  99.  
  100.             /**
  101.              * /javascript/application/modules/core.js
  102.              */
  103.             (function($)
  104.             {
  105.                 var core = unlocked.module('core');
  106.  
  107.                 //add routes
  108.                 core.routes.standard = Backbone.Router.extend(
  109.                 {
  110.                     routes:
  111.                     {
  112.                         "": "home",
  113.                         "/": "home",
  114.                         "pageTwo": "pageTwo"
  115.                     },
  116.  
  117.                     home: function()
  118.                     {
  119.                         new core.views.helloWorld();
  120.                     },
  121.  
  122.                     pageTwo: function()
  123.                     {
  124.                         new core.views.buttonTwo();
  125.                     }
  126.                 });
  127.  
  128.                 //add models
  129.  
  130.                 //add collections
  131.  
  132.                 //add views
  133.                 core.views.helloWorld = Backbone.View.extend(
  134.                 {
  135.                     el: $('#main'),
  136.  
  137.                     events:
  138.                     {
  139.                         'click #one': 'buttonOne',
  140.                         'click #two': 'buttonTwo'
  141.                     },
  142.  
  143.                     initialize: function()
  144.                     {
  145.                         _.bindAll(this, 'render');
  146.  
  147.                         this.render();
  148.                     },
  149.  
  150.                     render: function()
  151.                     {
  152.                         var context = {hello: 'Ryan'};
  153.                         var html = unlocked.renderTemplate('core.helloWorld', context);
  154.                         this.$el.empty().html(html);
  155.  
  156.                         return this;
  157.                     },
  158.  
  159.                     buttonOne: function()
  160.                     {
  161.                         console.log('one');
  162.                     },
  163.  
  164.                     buttonTwo: function()
  165.                     {
  166.                         var view = new core.views.buttonTwo();
  167.                     }
  168.                 });
  169.  
  170.                 core.views.buttonTwo = Backbone.View.extend(
  171.                 {
  172.                     el: $('#main'),
  173.  
  174.                     initialize: function()
  175.                     {
  176.                         _.bindAll(this, 'render');
  177.  
  178.                         this.render();
  179.                     },
  180.  
  181.                     render: function()
  182.                     {
  183.                         var html = unlocked.renderTemplate('core.buttonTwo');
  184.                         this.$el.empty().html(html);
  185.  
  186.                         return this;
  187.                     }
  188.                 });
  189.             })(jQuery);
  190.  
  191.             /**
  192.              * /javascript/application/application.js
  193.              */
  194.             (function($)
  195.             {
  196.                 //all javascript should be properly loaded now
  197.                 $(document).ready(function()
  198.                 {
  199.                     var templates =
  200.                     {
  201.                         "core.helloWorld": '/javascript/application/templates/helloWorld.us',
  202.                         "core.buttonTwo": '/javascript/application/templates/buttonTwo.us'
  203.                     };
  204.                     unlocked.loadRemoteTemplates(templates, false);
  205.                     unlocked.initialize();
  206.                 });
  207.             })(jQuery);
  208.         </script>
  209.     </body>
  210. </html>
clone this paste RAW Paste Data