loading multiple views in init function breaks one or the other

Question

I'm building my first backbone.js app, and I've run into a problem when trying to initialize my app and display both recipes and a shopping list, both of which are different (yet related) backbone objects.

My init function is

var MyApp= {
    Models: {},
    Views: {},
    Routers: {},
    Collections: {},
    AppView: {},
    Init: function() {
    new MyApp.Views.ShoppingList;
        new MyApp.Routers.Recipes;
        Backbone.history.start();
    }
};

Strangely, when I use

        new MyApp.Routers.ShoppingList;
        new MyApp.Routers.Recipes;

I don't get the shopping list View, I only get the recipes. I also don't get any errors.

The shopping list router is fairly basic

MyApp.Routers.ShoppingList = Backbone.Router.extend({
    routes: {
        "":             "index",
        "shopping_list/:id":    "show"
    },



    index: function(){
            console.log('this');
        new MyApp.Views.ShoppingList();

    }
});

so from what I understand, the app should load the router, and display the view, but I'm not getting that or the console.log.

--------------as requested, here is my 'recipes router'---------------

MyApp.Routers.Recipes = Backbone.Router.extend({
    routes: {
        "":             "index",
        "recipes/:id":  "show"
    },



    index: function(){

        if(!MyApp.RecipeList){
        MyApp.RecipeList = new MyApp.Collections.RecipeList;
        MyApp.RecipeList.page = 1;
        } else {
        MyApp.RecipeList.page++;
        }
        MyApp.RecipeList.url='/recipes?page='+MyApp.RecipeList.page;

        MyApp.RecipeList.fetch({
            add: true,
            success: function() {
                new MyApp.Views.RecipeList({ collection: MyApp.RecipeList});
            },
            error: function() {
                new Error({ message: "Error loading documents." });
            }
        });


    },

    show: function(id){
        var recipe = MyApp.RecipeList.get(id);

        new MyApp.Views.RecipeView({ model: recipe});

    },
    newRecipe: function(){
        new App.Views.Edit({ model: new Recipe() });
    },

    edit:  function(id){
        var recipe = new Recipe({ id: id});
        recipe.fetch({
            success: function(model, resp){
                new App.Views.Edit({ model: recipe});
            },
            error: function(){
                new Error({message: "Hey!? Were'd it go? sorry I can't find your recipe"});
                window.location.hash = '#';
            }
        });
    }
});

----------------- some progress -----------------------------

I may be wrong, but in commenting out sections of the router, I find that the problem may be caused by my 'routes' as they both have index where the url is empty. Commenting out the 'routes' in one controller/router causes the other controller/router to display.

I've changed the routes so that they are more representative of their namespace

routes{
    "recipes" : "recipes"
},

   recipes: function()...

but I'm still not getting the right information to display. I'm now trying to figure out if I need an initialize function and what that would look like, or if I've even debugged this properly

--------------------- update, I was using backbone wrong ------------------------ It turns out I believe that I was mis-understanding Routers and was thinking of them more like controllers, so I was calling multiple routers on load, but the page was only loading the last one which pointed to an empty route as you can only request a single url route at a time.

Now I'm loading multiple Views on load and only one router.

are you sure that when you're using MyApp.Routers.ShoppingList, in MyApp.Init() that you are are at the index route? Maybe pastie your Recipes router for more info? — joshvermaire
@joshvermaire, I've added the recipes router as requested, I'm not sure what you mean about being in the index route. — pedalpete

Paul Paul · Accepted Answer · 2011-12-23T15:42:26

After instantiating your view, you still need to render it and add it to the DOM.

index: function(){
  console.log('this');
  var view = new MyApp.Views.ShoppingList();
  //you don't have to append to the whole body, but this is just an example
  $('body').append(view.render().el);
}

loading multiple views in init function breaks one or the other

1 Answers