Question

这是关于 Backbone JS 的架构问题：

AppView包含加载了LeadsView的 DOM 元素占位符。
LeadsView包含 DOM 占位符以显示LeadView

我当前的路线为#app/leads/1，表示已加载所有3个视图。
AppView - ＆gt; LeadsView - ＆gt; {em>＃1 的LeadView。

现在突然用户点击了浏览器的刷新按钮。路由器会尝试将其转到#app/leads/:1路由到"app/leads/:lead_id" : "showLeadView"，但此时尚未呈现AppView和LeadsView，因此呈现LeadView会失败。

它正在寻找 DOM 元素来渲染自己，但找不到它。

如何处理 Backbone ？

TIA，尼姆罗德。

Answer 1

您可以在render路由被点击时以编程方式初始化并"app/leads/:lead_id" : "showLeadView"其他视图。

问题现在变为：如何查找视图是否已呈现？

我通过向 Models 和 Collections 添加一个新属性来解决这个问题，该属性会告诉我它们是否已填充（如果它们已被提取或者是否已设置属性））。可以在Thorax library repo。

中找到此实现

它看起来像这样：

isPopulated: function() {
  /*jshint -W089 */

  // We are populated if we have attributes set
  var attributes = _.clone(this.attributes),
      defaults = getValue(this, 'defaults') || {};
  for (var default_key in defaults) {
    if (attributes[default_key] != defaults[default_key]) {
      return true;
    }
    delete attributes[default_key];
  }
  var keys = _.keys(attributes);
  return keys.length > 1 || (keys.length === 1 && keys[0] !== this.idAttribute);
}

使用此方法，我可以验证是否已填充渲染父视图所需的集合。如果你导航到app然后导航到leads（实际上是以编程方式访问路径），则调用将被调用的方法。

看起来像这样：

if(!appModel.isPopulated())
    this.showAppView();

if(!leadsCollection.isPopulated())
    this.showLeadsView();

如您所见，这意味着在路由器中保留对appModel和leadsCollection的引用。

更新（澄清）

在我的回答的第一行，我提到了这样的事情：

AppView引用了一个子视图LeadsView，该子视图引用了子视图LeadView。
您有一个AppView。
当您点击appModel路由器时，您将AppView传递给.render()并在其上拨打app。
您将leadsCollection传递给AppView.getLeadsView()并在点击.render()路线时致电leads。
您将lead模型从leadsCollection传递到AppView.getLeadsView().getLeadView()，并在您点击路线时调用.render()。

或者你可以使用像Thorax

这样的东西

它已经为子视图添加了处理（处理事件委托，事件破坏，DOM清理等）并为它提供了模板处理程序，因此您可以在模板中指向要呈现子视图的位置。 / p>

我现在希望，我的意思更清晰，你可以看到它回答了你的问题。

如何在浏览器刷新后恢复backbonejs完整路由

1 个答案:

更新（澄清）