Question

I have been working on a Meteor app and want to add multi-page functionality with Backbone’s routing capabilities. However, when I do this:

meteor add backbone
meteor add underscore

and then try to create a simple ‘hello World’ within the app it crashes with the message:

ReferenceError: Backbone is not defined
at app/backbone.js:33:2
at run (/Users/timj/Documents/backbone/.meteor/local/build/server/server.js:142:63)
at Array.forEach (native)
at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
at run (/Users/timothyjaeger/Documents/backbone/.meteor/local/build/server/server.js:142:7)
Exited with code: 1

Not sure what I am doing wrong since I already added backbone to my meteor app! The js looks like this:

backbone-test-app.js

if (Meteor.isClient) {

      var AppView = Backbone.View.extend({
      // el - stands for element. Every view has a element associate in with HTML content will be rendered.
      el: '#container',
      // It's the first function called when this view it's instantiated.
      initialize: function(){
        this.render();
      },
      // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content. Like the Hello World in this case.
      render: function(){
        this.$el.html("Hello World");
      }
    }); 

var appView = new AppView();
}

    if (Meteor.isServer) {
  Meteor.startup(function () {
    Backbone.history.start({pushState: true});
        // code to run on server at startup
      });
    }

Answer 1

Backbone is a client side framework. You need to move the code to the client’s side only by removing the backbone related code from the if (Meteor.isServer) {..} and placing it into the if (Meteor.isClient) {..}.

If you use the client and server folder to partition your code you don’t need to use if (Meteor.isServer) {..} or if (Meteor.isClient) {..}, you only need to place backbone related code into the client folder.

I think the todos app uses backbone, if not have a look at this question on how to use it on the client side:

How do I create dynamic URL's with Meteor?

Also there is a package for meteor called meteor-router which does a fantastic job of routing between pages too, which may also suit your needs more comfortably. You can find more info at:

https://github.com/tmeasday/meteor-router