Backbone 区分客户端渲染和服务器端渲染

Question

我希望允许用户直接从服务器或使用链接请求我网站的网页，这将由 Backbone 的路由器处理。

当用户直接从服务器请求网页时，会提供一个完整的页面（包含 html、head、body、样式表和脚本）。

另一方面，当用户通过点击链接请求网页时，只会请求页面的相关部分，然后将其插入正确的位置，而网页的其他元素保持不变。

插入正确的位置我的意思是在到达特定路线后创建一个视图。然后视图被初始化并调用它的渲染方法来获取网页的相关部分并使用$el.html(content)将其插入到DOM中。

但我不想在直接从服务器获取网页时调用视图的渲染方法，因为所有需要的内容都已渲染，重新渲染只会导致一些 ui 闪烁效果。

是否有一些常见的方法可以让视图知道它们不应该呈现自己，因为已从服务器获取完全呈现的网页？

我可以将clientSideNavigation = true 之类的标志传递给路由器，每次单击链接时，路由器都会将其传递给视图，以便它们知道是否呈现内容。

但是当用户使用后退/前进按钮时它不起作用。

我还可以检查一个视图是否在其$el 内有一些特定元素应该出现在此网页上 - 例如，如果我有一个名为 CatsView 的视图，我可以检查 #cats-box 是否在其内$el 元素。但它涉及更多的 DOM 操作，我宁愿避免。

Answer 1

有一个根视图并有子视图的占位符。第一次从服务器渲染完整的页面。

对于在链接点击时呈现部分视图，您可以在根视图上定义相应的事件哈希。

让事件处理程序回调调用一个控制器（自定义 js 对象），该控制器负责加载数据、构建视图并将数据传递给它。

最后也用Router navigate(http://backbonejs.org/#Router-navigate)方法用{trigger:false}更新url到对应的url，这样当刷新被点击时，用户回到同一个视图 .

在指定 url 的路由器回调中，通过传递一个标志来调用控制器对象上的相同方法，以便功能同步，并且使用该标志可以防止调用路由器导航方法，因为它不是必需的。