在 init 函数中加载多个视图会破坏其中之一

Question

我正在构建我的第一个backbone.js应用程序，在尝试初始化我的应用程序并显示食谱和购物清单时遇到了问题，这两者都是不同（但相关）的主干对象。

我的初始化函数很

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

奇怪，当我使用时

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

我没有得到购物清单视图，我只得到食谱。 我也没有收到任何错误。

购物清单路由器相当基本，

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



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

    }
});

因此根据我的理解，应用程序应该加载路由器并显示视图，但我没有得到它或 console.log。

--------------根据要求，这是我的“食谱路由器”----------------

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 = '#';
            }
        });
    }
});

----------- ------ 一些进展 ------------------------------

我可能是错的，但是在注释掉路由器的部分时，我发现问题可能是由我的“路线”引起的，因为它们都有网址为空的索引。注释掉一个控制器/路由器中的“路由”会导致显示另一个控制器/路由器。

我已经更改了路线，以便它们更能代表其名称空间

routes{
    "recipes" : "recipes"
},

   recipes: function()...

，但我仍然没有获得正确的信息来显示。我现在试图弄清楚我是否需​​要一个初始化函数以及它会是什么样子，或者我是否已经正确调试了它

-------------------- - 更新，我使用主干错误------------------------ 事实证明，我相信我误解了路由器，并且认为它们更像控制器，因此我在加载时调用了多个路由器，但页面仅加载最后一个指向空路由的路由器，因为您只能请求一次一个 url 路由。

现在我正在加载多个视图，并且只加载一个路由器。

Answer 1

实例化视图后，您仍然需要渲染它并将其添加到 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);
}