使用相同模型的多个视图的主干

Question

我正在做一个只有骨干的前端项目。 有一点我想做以下事情：

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

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

我正在考虑将它临时存储到本地存储中，但它并不是一个很好的解决方案......

谢谢

Answer 1

1. 路由器创建模型实例
2. 路由器将该模型实例传递给表单视图构造函数选项
3. 路由器绑定事件侦听器view.on('formComplete', this.storeModel)
4. 路由器渲染＆amp;附表格式视图
5. 用户填写表单视图
6. 表单视图将表单中的数据设置为模型
7. 表单视图触发路由或事件（如this.emit('formComplete', this.model);）
8. 路由器的storeModel处理函数采用相同的模型实例，将其this.model临时存储在路由器上，然后导航到图表视图。
9. 在图表视图路由处理程序方法中，路由器将this.model传递给图表视图contsructor选项，渲染，附加

这有点使用您的路由器作为内存数据缓存，但由于您没有后端，您需要在某处存储数据。

Answer 2

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

我认为您的问题的关键是您实际上只有一个页面，但在此页面中加载了不同的视图。不要换到其他页面。

我认为您的应用网址为http://xxx.xxx.xxx/#first_view。并使用骨干路由器来改变视图

• 如果您只想保留数据，直到用户刷新浏览器。只需将它们保存到Global js变量中即可。一旦你使用像
这样的东西

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

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