CODEWITHSUNDEEP
backbone.js
pedalpete
pedalpete

Reputation: 21556

loading multiple views in init function breaks one or the other

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.

Upvotes: 1

Views: 758

Answers (1)

Paul
Paul

Reputation: 18597

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);
}

Upvotes: 0

Related Questions