具有相同模型的主干多个视图

Posted 2023-02-26

【中文标题】具有相同模型的主干多个视图

【英文标题】：backbone multiple views with the same model

【发布时间】：2013-07-10 17:30:23

【问题描述】：

我正在做一个只有主干的前端项目。 在某一时刻，我想做以下事情：

带有一些输入的基本表单 用户提交表单 根据用户的输入，使用 d3 或 google graph 显示一些很酷的图表。

问题是我没有任何后端，所以我从不保存用户的输入，我怎样才能更改视图并仍然拥有表单的数据？

我正在考虑将其临时存储到本地存储中，但这对于性能而言并不是一个很好的解决方案...

谢谢

【参考方案1】：

路由器创建模型实例 路由器将该模型实例传递给表单视图构造函数选项 路由器绑定事件监听器view.on('formComplete', this.storeModel) 路由器渲染和附加表单视图 用户填写表单视图 表单视图将表单中的数据设置到模型中 表单视图触发路由或事件（如this.emit('formComplete', this.model);） Router 的storeModel 处理函数采用相同的模型实例，将其作为this.model 临时存储在路由器上，然后导航到图形视图。 在graph view route handler方法中，router将this.model传递给graph view contsructor options, render, attach

这有点像将您的路由器用作内存数据缓存，但由于您没有后端，因此您需要将数据存储在某个地方。

【讨论】：

谢谢。但是如果我使用this.emit，我应该订阅一些东西到路由器中。所以路由器不会被 router.navigate 触发。所以我需要做两个不同的路由器实现。一个用于事件的路线。而且网址也不会改变。如果我要更改网址 avec 路由器将转到默认路由或类似的东西......是否可以做类似 router.navigate("blabla", this.model) 的事情？

我更新了我的答案。我认为了解路由器或任何其他视图的 URI 或路由的视图是不良封装。视图应该只发出事件而不关心响应这些事件的内容。

【参考方案2】：

我也在做一个带有主干的单视图网络应用程序。

我认为您的问题的关键在于您确实只有一个页面，但将不同的视图加载到此页面中。不切换到另一个页面。

我想您的应用网址是http://xxx.xxx.xxx/#first_view。并使用主干路由器更改视图

如果您只想保留数据直到用户刷新浏览器。只需将它们保存到全局 js 变量中即可。一旦你使用类似的东西

window.location = Global.getBaseURL() + "#second_view" 更改您的视图。你实际上是通过 ajax 加载“second_view”并将 html 放入当前页面。你永远不会丢失你的 js 变量。

如果您想保留数据甚至用户刷新或转到另一个页面。你必须使用 sessionStorage。完成加载新页面后，将数据保存为 JSON 格式并将其转换回 js 变量。