backbone.js引导嵌套资源

如果用户已添加书签或共享以下URL，我的单页backbone.js应用程序（使用backbone.Router）应该如何检索所需数据以呈现完整视图

如果用户添加了书签，我可以轻松引导菜单的第一页

# Inline before </body>, in a <script> block
Menus.reset(<%= @menus.to_json %>);

#在前内联，在块中
菜单。重置（）；

但是在我上面提到的例子中，需要3层引导，但是由于这是hashtag导航，服务器不知道如何引导菜单、Menu of:Menu_id、Items、Item of:Item_id和第一页配料

# It would look like the following on a real page
# http://mydomain.example.com/menus/99/items/33/ingredients
# please see past the invalid syntax
Menus.reset(<%= @menus.to_json %>);
var menu = Menus.get(99);
menu.items.reset(<%= @menus.find(99).items.find(:all).to_json %>);
var item = Menus.items.get(33);
item.ingredients.reset(<%= @menus.find(99).items.find(33).ingredients.find(:all).to_json %>);

#在一个真实的页面上看起来像下面这样
# http://mydomain.example.com/menus/99/items/33/ingredients
#请查看无效语法
菜单。重置（）；
var menu=Menus.get（99）；
menu.items.reset（）；
var item=Menus.items.get（33）；
item.components.reset（）；

是否有其他人用来实现这一点的模式？这对你有意义吗

我强烈希望创建一个引导控制器，其唯一目的是获取绘制任何页面所需的所有模型和集合/bootstrap？path=/menus/99/items/33/components，然后让它将一些jsonp返回到调用方页面

---

提前感谢。

如果我正确理解了您的问题，您会遇到这样的问题：应用程序中间的深层链接会导致视图无法合理构建，因为数据没有加载

我认为这里你需要意识到，路线和视图之间不需要1:1的对应关系

因此，当您的路由器检测到这种情况时，它可以显示一个通用的“加载”视图，开始提取数据，然后当数据到达时，显示预期的视图

（这个机制也可以链接——例如，您可能希望显示一个登录视图，然后是加载视图，最后是最终视图）

我可能有一个这样的实用函数：

awaitFoos = function (foos, callback) {
  var loadingView = new CommonLoadingView();

  if (foos.isFetched) {
    callback();
  } else {
    this.showPageView(loadingView);

    foos.fetch({success: callback});
  }
};

然后在路由器中，我将使用：

goFooView: function (fooid) {
  var self = this;

  this.appView.awaitFoos(function () {
    var model = self.getFoo(fooid),
        view = new FooView({model: model});

    self.appView.showPageView(view);
  });
}

---

如果我正确理解了您的问题，您就会遇到这样一个问题：应用程序中间的深层链接会导致视图无法合理构建，因为数据没有加载

我认为这里你需要意识到，路线和视图之间不需要1:1的对应关系

因此，当您的路由器检测到这种情况时，它可以显示一个通用的“加载”视图，开始提取数据，然后当数据到达时，显示预期的视图

（这个机制也可以链接——例如，您可能希望显示一个登录视图，然后是加载视图，最后是最终视图）

我可能有一个这样的实用函数：

awaitFoos = function (foos, callback) {
  var loadingView = new CommonLoadingView();

  if (foos.isFetched) {
    callback();
  } else {
    this.showPageView(loadingView);

    foos.fetch({success: callback});
  }
};

然后在路由器中，我将使用：

goFooView: function (fooid) {
  var self = this;

  this.appView.awaitFoos(function () {
    var model = self.getFoo(fooid),
        view = new FooView({model: model});

    self.appView.showPageView(view);
  });
}

---

我增加了你的答案，因为这正是我现在为#/menus/99所做的（类似），所以它肯定没有错（在我看来）：）但它确实为#/menus/99/items33/ingredientsIt提供了一个嵌套的回调地狱。一种方法（我还没有尝试过）是使用某种形式的Promission/async库（例如JQuery Promission、node Promission或async[）。我将尝试其中一种promise库。感谢您的想法。也许我将创建两个路由器。一个仅在初始页面加载时使用（想想window.onload），以加载页面所需的所有数据（#menus/99/items/33/components），然后是用户在应用程序中导航的另一个路由器。我将继续回答这个问题，希望有更多的想法。我无法想象我将是唯一一个有这个问题的人。谢谢！我补充了你的答案，因为这就是我现在正在做的（类似）对于#/menus/99，所以它肯定没有错（在我看来）：）但它为#/menus/99/items33/Ingreditent提供了一个嵌套的回调地狱，确实如此。一种方法（我还没有尝试过）是使用某种形式的承诺/异步库（例如JQuery承诺、节点承诺或异步[）。我将尝试一个promise库。感谢您的想法。也许我将创建两个路由器。一个仅用于初始页面加载（think window.onload）以加载页面所需的所有数据（#menus/99/items/33/contracents）然后是用户在应用程序中导航的另一个路由器。我将继续回答这个问题，希望有更多的想法。我无法想象我将是唯一一个有这个问题的人。谢谢！