Backbone将客户端呈现与服务器端呈现区分开来

时间:2015-03-24 13:06:51

标签: javascript html backbone.js single-page-application

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

当用户直接从服务器请求网页时,会提供整页(包含html,head,body,样式表和脚本)。

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

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

但是我不想在直接从服务器提取网页时调用视图的render方法,因为所有需要的内容都已经被渲染,并且重新渲染它只会导致一些ui-flickering效果。

是否有一些常见的方法让Views知道他们不应该渲染自己,因为已经从服务器中获取了完全呈现的网页?

每次点击链接时,我都可以将clientSideNavigation = true这样的标志传递给路由器,然后路由器将其传递给视图,以便他们知道是否呈现内容。

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

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

1 个答案:

答案 0 :(得分:0)

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

为了在链接点击上呈现视图的部分,您可以在根视图上定义相应的事件哈希。

让事件处理程序回调调用一个控制器(自定义js对象)来完成加载数据,构造视图并将数据传递给它的工作。

最后还使用带有{trigger:false}的路由器导航(http://backbonejs.org/#Router-navigate)方法将URL更新到相应的URL,然后当点击刷新时,用户返回到同一视图

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