在jQuery中更改视图（从表单到结果）的最佳方法

Question

我想要创建一个搜索表单，用户将项目排队，然后他们单击搜索按钮以查看其结果。结果从第三方API（通过XHR）加载，当他们加载时，我想显示一个进度轮。加载完成后，他们将显示结果，他们将能够点击“返回”按钮返回到搜索表单（将视图更改回原始）。

请注意，这是全部在一页上。没有实际的“提交”，只是为了显示结果而改变视图。可以刷新结果视图并保留在结果视图上，因为我将使用散列来维护状态（如search /！＃searchterms）。

我是jQuery的中级用户（阅读文档并与它合作了大约半年的时间），但是我从来没有这样做过，我对最佳实践感兴趣。我想知道的一些具体事情：

• 我应该简单地使用toggle（）切换视图吗？或者，这种方式是否会使用某种动画看起来更加蓬勃？
• 是否有一些幕后“预加载”技巧，我应该做些什么来节省更新DOM的时间？
• 使用hashtags维护状态的常见名称是什么？我在哪里可以阅读关于如何使用jQuery做得更好？
• 别的我应该知道..

Answer 1

你基本上要求一个全功能的Web应用程序。你可以拼凑出你想要的东西，如

• 本Alman的烧烤http://benalman.com/projects/jquery-bbq-plugin/什么（维护通过哈希状态）
• jQuery的模板https://github.com/jquery/jquery-tmpl（对...查看）
• 的jQuery（处理控制器逻辑一样）

或者你可以学到像Backbone.js或Spine.js或JavascriptMVC的东西，以增加一致性。

在内存或本地存储中，有很多方法可以处理HTTP条件请求和客户端缓存的缓存。最近，我给了一个报告就这个问题和它的可视位置：

http://loft.bocoup.com/tim-branyen-jquery-templates/

我不是一个特别大的扬声器，但是幻灯片和演示源是在这里： http://talks.tabdeveloper.com/Advanced_jQuery_Templates/

当然，你可以这样做这是非常基本的......但我会恳请您更多地考虑您想要做什么并选择正确的解决方案。

Answer 2

$('a#search').click(function(){ 
    $('#search_form_overlay').show(); 
    $('#search_results').load('urls_to_api', { q: query_terms }, function() { 
    $('#search_form_overlay').hide(); 
    }); 
}); 

而且一些答案：

问：切换（）与动画
答：拨动比动画快，但一看就更好的是这是一个品味的问题。

Q.预加载
答：您没有使用新资源（图片）更新DOM，您只是显示隐藏的div，因此不需要预加载。

Q.保持状态
A.如果保持状态你指的每个游客的体验，你需要设置和读取Cookie，但如果你的意思是状态应该是可重复的从URL，那么你” d使用url片段（#something）。 Here是我为类似情况提出的一种方法;你可以适应你的需求。