跨越单一页面视图维护应用程序状态翻转和多页翻转 [英] Maintaining application state across single page view flips and multi-page flips

问题描述

好了，随着技术的进步，我们的问题解决了不久前再次出现。

Well, as technology progresses, issues we solved long ago crop up again.

回到黑暗时代，当PHP和ASP被认为是真棒，我们一直与视图状态的问题。如果你有一个页面，说上十几个选择组合框，用户选择一些组合和明年命中，然后意识到他们搞砸了，打在浏览器上的后退按钮，组合框会回来在默认状态下，通常与选项[0]选择。为了prevent这一点，我们不得不写样板code的容载量，将这些组合框的状态保存到一个cookie，或会话变量，或东西，这样当用户点击后退按钮，我们可以重新加载组合框回到他们在他们离开时的状态。

Back in the dark ages, when PHP and ASP were considered awesome, we always had a problem with view states. If you had a page with say a dozen select combo boxes on it, your user chooses some combination and hits next, then realizes they screwed up and hit the back button on the browser, the combo boxes would be back in the default state, usually with option[0] selected. In order to prevent this, we had to write boatloads of boilerplate code that would save the state of those combo boxes to a cookie, or session variable, or something so that when the user hits the back button, we can reload the combo boxes back to the state they were in when they left.

如果你有在屏幕上一个DataGrid此问题进一步复杂化。因为那样的话你就必须拿出不必再次命中数据库的地方保存该网格prevent一些华而不实的方式。

This problem was compounded even further if you had a datagrid on the screen. Because then you would have to come up with some slick way of saving that grid somewhere to prevent from having to hit the database again.

随后而来的光。浏览器开发者意识到，大多数Web开发者对要回写用Cobol终端程序的边缘，由于这个问题，UI添加缓存到浏览器。这使我们webdevs到不必再担心这个问题，除了奇数的情况。

Then came the light. Browser developers realized that most web developers were on the verge of going back to writing terminal programs in Cobol due to this issue and added UI caching to the browsers. This allowed us webdevs to not have to worry about this anymore except in odd situations.

所以，生活是不错的。这时，有人想出了试图复制GWT没有所有的麻烦，所有这些JavaScript框架网络爆好主意。在一个IM与负责具体的时刻是AngularJS 1.2.10与角UI。我直到星期五（最有可能的星期三寿），使上，如果这项技术是一个可行的替代我们目前的标准（这就是pretty普遍得多恨）JSF进行初步评估。

So, life was good. Then someone came up with the bright idea of trying to replicate GWT without all the hassle and the web explodes with all these javascript frameworks. The one im dealing with specifically at the moment is AngularJS 1.2.10 with Angular-UI. I have until Friday (most likely wednesday tho) to make an initial assessment on if this technology is a viable alternative to our current standard (thats pretty much universally hated) JSF.

所以，我按照一些导游，捣我的头靠在办公桌上几下，我有3实际的HTML页面，用2次各HTML页面的角应用。

So, i follow some guides, pound my head against the desk a few times, and I have an angular app with 3 actual HTML pages, each HTML page with 2 views.

你去那里之前，明白，我们不能使用它，除非我们可以做多页的JS应用程序。有人认为这将工作到应用程序已经在开发了十年以上，其根本就没有经济实用到报废整个UI，并重新开始。我们将改为做这样服用这些支柱50页，并把它们转换成角/休息和联系起来无缝回应用程序的剩余800页支柱的东西。

Before you go there, understand we can't use it unless we can do multi-page JS apps. Some of the applications that this will be worked into have been in development for a decade or more and its simply not financially practical to scrap an the entire UI and start over again. We would instead be doing things like taking these 50 struts pages and converting them to angular/rest and linking them seamlessly back into the remaining 800 struts pages of the application.

因此​​，在我的运动玩这个，我碰到我的老克星。后退按钮视图状态的问题。

So in my exercise of playing with this, I encounter my old nemesis. Back button view state issues.

我一直在玩与UI路由系统。我可以深层链接使用路由系统的事实，解决了我的问题的一部分。但是，如果说我有一个搜索页面是这样的：

I have been playing with the UI-route system. The fact that I can deep link using the route system solves part of my problems. But, if say I have a search page like this:

view-search
    combo: search type [member,nonmember]
    combo: result type [detail,summary]
    combo: search state {all the states]
    textbox: contract number
    etc etc etc

和组合框中选择和文本输入的各种组合来了1000人的名单。现在，用户选择这些人对数据网格中的一个，它需要你查看细节。那么事实上，你可以使用路由做类似的index.html＃细节/鲍勃<​​/ code>是很酷，但如果用户意识到这就是错误的鲍勃和点击后退按钮，他们又得到了一个空白搜索屏幕，他们有超过糟进入一切的是，再派搜索到的数据库来重建数据网格。有些屏幕有50个或更多的选择从数据搜索时选择这样试图把所有的人都到URL路由听起来完全不切实际给我。

And various combinations of combo box selections and text entries comes up with a list of 1000 people. Now the user selects one of those people on the data grid and it takes you to view-detail. Well the fact that you can use routing to do something like index.html#detail/bob is cool, but if the user realizes thats the wrong bob and hits the back button, they get a blank search screen again and they have to enter everything over and worse yet, send another search to the database to rebuild the datagrid. Some of these screens have 50 or more options to choose from when searching for data so trying to put all of them into the URL routing sounds completely impractical to me.

现在在我的研究，我发现这个职位：

Now in my research I found this post:

preserve与角UI的路由器状态

和有承诺，主要是因为我有我可以存储到Redis的数据库或案件会话EJB视图状态对象的时候，用户实际跳出的角度，进入传统的Struts应用程序，然后后退按钮返回到棱角分明的应用程序，但事实仍然是，在一些这些网页，这是一个巨大的样板code量，我们将不得不为了使它工作来写。​​

And that has promise mainly because I have a view state object that I can store into a Redis database or a session EJB for cases when the user actually jumps out of angular and into the legacy Struts application, then back buttons back into the angular application, but the fact still remains that on some of these pages, that is a huge amount of boilerplate code that we would have to write in order to make it work.

我真的不介意手动保存过的视图状态对象，并读回在从Redis的服务器或东西随时一个用户进入或离开一个HTML页面中的系统的想法。我真正追求的是一种能够自动生成要保存，而无需编写锅炉code的体积的对象。

I don't really mind the idea of having to manually save off the view state object and read it back in from a Redis server or something anytime a user enters or leaves an HTML page in the system. What i'm really looking for is a way to automatically generate the object that is to be saved without having to write volumes of boiler code.

这可能吗？我一直读UI路由文档，但它并不像这样被解决，至少不认为我还没有翻译。

Is this possible? I keep reading the ui-route documentation but it doesn't look like this is addressed, at least not that i've translated yet.

如果这是可能的，什么控制我应该看什么？

If this is possible, what controls should I be looking at?

感谢

--------------编辑

-------------- Edit

我只是想的东西。有一个中心范围向每个单页应用。 （IM基本上将要建立一个多单页的应用程序和挂钩在一起），所以，如果我使用的命名惯例，像这样

I just thought of something. There is one central scope to each of the single page applications. (Im basically going to be building a multiple single page apps and hooking them together) So if i use a naming convention, something like this

$scope.viewstate.view-search.searchType
$scope.viewstate.view-search.resultType
$scope.viewstate.view-search.searchState

那么ViewState的对象应该仅仅是一个JS数组，当我创建一个函数来移动到struts.do，我可以简单地关闭以Redis的服务器保存数组嵌套映射对象。然后，当我的用户后退按钮返回到应用程序的角度，我可以捕获使用路由系统和检索的Redis的ViewState对象中并插入它放回我的范围，从而重建整个单个页面应用的范围在一杆。

Then the viewstate object should simply be a js array and when I create a function to move to struts.do, i can simply save that array off to the Redis server as a nested map object. Then when my user back buttons back into the angular app, i can capture that using the route system and retrieve that viewstate object from Redis and insert it back into my scope, thereby rebuilding the scope for the entire single page app in one shot.

将这项工作？

推荐答案

我探讨，我写一个角应用类似的东西。页面刷新过程中保持一个用户登录很容易。显示在页面上的状态刷新后是一个完全不同的问题。

I am exploring something similar for an Angular app that I am writing. Keeping a user login during a page refresh is easy. Displaying the state on the page after a refresh is an entirely different problem.

需要多长的状态下持续？我评估两种可能性。

How long must the state be persisted? I'm evaluating two possibilities.

首先，保存状态（当前表单值或其他）数据库。由于页面的变化，逐步将状态保存到数据库中。在浏览器中刷新检查保存值的数据库。

First, saving the state (current form values or whatever) to the database. As the page changes, incrementally save the state to the database. On a browser refresh check the database for saved values.

二是利用本地浏览器存储。这是存储5兆。 5兆是大量的文字。再次这一数据增量被保存到存储。当浏览器刷新，只需从localStorage的加载数据。

Second is to use local browser storage. This is 5 megs of storage. 5 megs is a lot of text. Again this data would incrementally be saved into storage. When the browser refreshed, simply load data from localStorage.

这篇关于跨越单一页面视图维护应用程序状态翻转和多页翻转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！