SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Requirejs plus Backbone?

    Hey guys! I'm starting my first backbone application with requirejs and it's not working. I'm not sure i'm doing it correctly, but i'm trying to access the route variable but it's not working..Here's the code:
    http://plnkr.co/edit/Vqu9c2RzA0zGGFkm0CRB?p=catalogue

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi calebbee,

    At the moment, you're setting up your router object like this:
    Code:
    var router = Backbone.Router.extend({ 
    
        routes:{
            '' : 'index'
        },
        
    });
    
    var app_router = new router;
    
    app_router.on('index', function(){
        console.log( "hi there from" );
    });
    You've defined your index route correctly, but you're trying to listen for an 'index' event on the router which doesn't exist. Your route actions need to be methods of your router object, like this:
    Code:
    var router = Backbone.Router.extend({ 
    
        routes:{
            '' : 'index'
        },
        
        index: function() {
            console.log( "hi there from" );
        }
        
    });

  3. #3
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Looking over the rest of your code, there are several other things that need changing:
    main.js
    Code:
    requirejs.config({  //This should be require.config
      "paths":{
    		"underscore":"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min",
    		"jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min",
    		"backbone": "//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min"
    	},
    	"config":{ //Remove this config object - shim should be on the same level as paths
    		shim: {
    			    underscore: {
    			      exports: '_'
    			 },
    		backbone: {
    			      deps: ['underscore', 'jquery'],
    			      exports: 'Backbone'
    			 }
    		}
    	}
    });
    
    define(['underscore','jquery', 'backbone', 'router'], //This should be a require call, not define
    function($, _, Router){  //Your dependencies are out of order with the variables you're passing into the function
    
    	Router.initialize(); //Create a new instance of your router object here, and the initialize method is called automatically by Backbone
    });
    So, with these changes, the revised file should look like:
    Code:
    require.config({
        "paths": {
            "underscore":"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min",
            "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min",
            "backbone": "//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min"
        },
        shim: {
            underscore: {
                exports: '_'
            },
            backbone: {
                deps: ['jquery', 'underscore'],
                exports: 'Backbone'
            }
        }
    });
    
    require(['router'], function(Router) {
        var app_router = new Router;
        Backbone.history.start();
    });
    Note that to start the router, we only need to state router as a dependency - router itself defines Backbone as a dependency, and we've already told requirejs that Backbone depends on underscore and jquery.

    The revised router.js now looks like this:
    Code:
    define(['backbone'], function(){
    
        var router = Backbone.Router.extend({ 
    
            routes:{
                '' : 'index'
            },
              
            index: function() {
                console.log( "hi there from" );
            }
                
        });
    
        return router;
    
    });

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay. I was researching and just put the shim in my code without knowing what it really does. But now i see what's going on. The export option just defines how you're going to reference it in the code right? It allows you to use _ for underscore? If so, why don't you need it for jquery?

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    The shim is for code that doesn't use the AMD module system.. jquery does, which is why you don't need a shim for it. The export option tells requirejs what global variable the code uses. In the case of underscore, you access all of the features of the library via the _ global variable. That's why when you're defining your own modules, like router, you don't have to pass in Backbone and $ as function arguments - they're already available in the global scope.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •