How to generate HTML using JSON in an elegant way in jQuery?

2012-07-17 10:48:06 +08:00
 GordianZ
Currently I'm using an HTML template, and using selectors to fill in those data like this:

$("#post-title > a").text(data.title);
$.each(doc.comments, function(index, comment) {
// some raw HTML tangled up in JavaScript...
});


It's really repetitive and rely too much on tags' ID attribute.
Is there a way to separate HTML tags from JavaScript? I've heard jQuery Templates, but they're deprecated aren't they?
4682 次点击
所在节点    jQuery
18 条回复
ruoran
2012-07-17 10:52:42 +08:00
bcxx
2012-07-17 11:06:01 +08:00
use template language
GordianZ
2012-07-17 12:12:45 +08:00
@ruoran Can they be using in a runtime manner? I need logic to process JSON when AJAX request returns.

@bcxx Yes, I knew template language is the solution, do you have any good suggestions?
lianghai
2012-07-17 12:15:51 +08:00
这个奇丑的网页可能有用……
http://garann.github.com/template-chooser/
GordianZ
2012-07-17 12:19:43 +08:00
@lianghai Oh crap, the template engine I'm currently using supports client-side rendering. I just found out via your link, now I feel stupid.
:|
GordianZ
2012-07-17 12:22:50 +08:00
@ruoran Oh, so mustache also supports client side rendering...
I think I need to stop coding and have some rest, my head ain't thinking straight...
bcxx
2012-07-17 12:39:01 +08:00
@GordianZ mustache is ok, though it's slow :/
ruoran
2012-07-17 12:56:59 +08:00
@GordianZ It's about time to sleep, at least for me :)
magic22cn
2012-07-18 23:08:27 +08:00
i prefer js template but not SEO is an issue
ljbha007
2012-07-20 09:56:29 +08:00
Ejs is an easy-to-use template engine and is independent of jQuery.
http://embeddedjs.com/
zhouyang
2012-07-21 08:31:02 +08:00
ember.js
erlang
2012-07-21 09:57:32 +08:00
拜托楼主还是说中文吧,这语法错误看得我忍不住跳进来说一句。
bcxx
2012-07-21 10:00:59 +08:00
@erlang 不是所有电脑都有中文输入法的
fanzeyi
2012-07-21 18:17:14 +08:00
@erlang 这不是考试 何必拘泥于语法错误?
ssword
2012-07-21 18:26:09 +08:00
用mustache吧
GordianZ
2012-07-21 18:51:26 +08:00
我现在用的 Jade 因为后端用 Express 渲染页面已经用了,所以省去学习的时间。

@erlang 有错误还请多指正,谢谢。
ine181x
2012-07-21 19:50:07 +08:00
swig也不错。
bcxx
2012-07-21 19:53:07 +08:00
@ssword 有点慢~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/42593

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX