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

-----------------一些进步---------------------------- -

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

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

routes{
    "recipes" : "recipes"
},

   recipes: function()...

但是我仍然无法显示正确的信息。我现在正试图弄清楚我是否需要初始化函数以及看起来是什么样的，或者我是否已经正确地调试了这个函数

---------------------更新，我使用骨干错了------------------- ----- 事实证明我相信我误解了路由器，并且更像是控制器，所以我在加载时调用多个路由器，但是页面只加载指向空路径的最后一个，因为你只能请求一次一个网址路由。

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

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

在init函数中加载多个视图会中断一个或另一个

1 个答案: