1

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

http://mydomain.example.com/menus#/menus/99/items/33/ingredients

如果用户为http://mydomain.example.com/menus添加了书签，我可以轻松地引导第一页菜单。

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

但是在我上面提到的情况下，需要 3 层引导，但由于这是#hashtag 导航，服务器不知道引导菜单、:menu_id 的菜单、项目、: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 %>);

是否有其他人用来完成此任务的模式？你能理解这个吗？

我强烈希望创建一个引导控制器，其唯一目的是获取绘制任何页面所需的所有模型和集合。/bootstrap?path=/menus/99/items/33/ingredients 然后让它返回一些 jsonp 到调用者页面http://mydomain.example.com/menus#/menus/99/items/33/ingredients。

提前致谢。

4

1 回答 1

1

如果我正确理解了您的问题，那么您的应用程序中间的深层链接会遇到无法合理构建视图的问题，因为未加载数据。

我认为在这里您需要意识到路线和视图之间不需要存在 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);
  });
}
于 2012-05-31T11:29:22.223 回答