通过JSON/AJAX更新HTML
自从我听说它以来,我一直在使用JSON处理AJAX功能,因为使用RJS /呈现HTML“感觉”错误,因为它违反了MVC。我工作的第一个AJAX项目最终以20-30个控制器操作直接绑定到特定的UI行为,我的视图代码遍布控制器操作,部分和rjs文件。使用JSON允许您在视图中保留特定于视图的代码,并且只能通过AJAX查看agnostic/RESTful控制器操作来获取所需数据。通过JSON/AJAX更新HTML
我从使用纯JSON发现的一个令人头痛的问题是,您必须通过JS'呈现'HTML,这对于需要更新DOM重元素的AJAX来说可能是一个真正的痛苦。我最终得到长字符串的构建代码,如
// ...ajax
success: function(records){
$(records).each(function(record){
var html = ('<div id="blah">' + record.attr +
etc +
')
})
}
其中etc是根据记录数据动态构建HTML的10-15行。除了烦恼外,更严重的缺点是HTML结构的重复(在模板和JS中)。*这种方法是否有更好的做法?
(我为终于伸手动机是我现在有更新HTML如此复杂,它需要Ruby代码的两个嵌套循环首先进行渲染。复制在Javascript中似乎疯狂的任务。)
- 我考虑的一件事是直接从文件系统加载静态部分文件,但这似乎有点多。
你可以在jQuery中使用load函数; 此加载页面的内容到这样一个div:
$('#content').load("content/" + this.href.split('#')[1] + ".html", '', checkResponse);
只是做一个动态的观点,你是好去...
我_could_,但这让我回到了我想要做的每个AJAX更新的具体操作/部分的糟糕的过去。对于一个*的*者来说,这是非常痛苦的。我希望这不是唯一的实用解决方案。 – tfwright 2010-01-18 19:31:11
我会创建一个包含占位符的HTML结构去您需要通过AJAX更新元素。它适用的结构多少取决于你正在更新的内容;如果你知道你将有时间提前元素的数量,这将是东西的
<div id="article1">
<div id="article1Headline"></div>
<div id="article1Copy"></div>
<div id="article1AuthorInfo"></div>
</div>
<div id="article2">
<div id="article2Headline"></div>
<div id="article2Copy"></div>
<div id="article2AuthorInfo"></div>
</div>
然后编写代码,直接引用的每个元素的id的效果,并插入到.innerHTML属性(或者jquery做同样事情的任何语法上更含糊的方式)。恕我直言,分配每个元素的内容并不是非常可怕的,你不想通过AJAX函数散布的部分是HTML结构本身;在你的应用中,内容无论如何都是不稳定的。
但是,它看起来像你可能有未知数量的元素的列表,在这种情况下,它可能是你需要只是把一个占位符:
<div id="articleList"></div>
在这种情况下,我真的不明白的方式,以避免建立HTML结构在JavaScript调用,但你的JavaScript分解的合理数量应该帮助的是:
function addArticle(headline, copy, authorInfo, i){
createDiv("article" + i + "Headline", headline);
createDiv("article" + i + "Copy", copy);
createDiv("article" + i + "AuthorInfo", authorInfo);
}
(不工作,当然代码,但你的想法,)
是的,我已经在尽可能使用占位符。分解函数本身的更常见的建议是有帮助的。实际上,我非常喜欢这个代码,它看起来像一个潜在的jQuery插件...确实:http://blogs.microsoft.co.il/blogs/basil/archive/2008/08/21/jquery-create-jquery -plug-in-to-create-elements.aspx – tfwright 2010-01-18 20:10:36
我喜欢模板化的想法。根据我的经验,它可以真正清理那些混乱的字符串操作!
解决方法有很多,比如,检查了约翰Resig的(jQuery的作者):
很棒的链接,谢谢 – tfwright 2010-01-18 21:37:02
这仍然有点混乱,你必须在Javascript中包含布局。我非常喜欢John Resig在其他答案中的模板,这些答案非常清楚(大部分)将用户界面和控制器分开。很好,如果Jaml为你工作:) – Jaanus 2010-01-22 00:28:53