求Javascript template的最佳实践

2012-12-07 13:12:50 +08:00
 leben
手头上在实现一个弹出层显示员工档案,员工档案用table列表,支持搜索。
以前都是在服务器端把整个html拼好,现在像只返回json,然后在前段用hogan.js生成html。

1、我现在页面里text/templdate放模板,但是这个弹出层在几个页面都用到,是不是只能把模板html用字符串放在js文件里?

2、因为支持搜索,弹出层里的table数据可能会发生变化,每次都要用templdate生成rows html,然后再替换table里面的html。

感觉用template在生成html这个阶段的确很方便,但是如果涉及复用和数据刷新就不是特别舒服。
没有经验,求有经验的给点儿指点,谢谢!
4079 次点击
所在节点    问与答
10 条回复
powerfj
2012-12-07 13:16:38 +08:00
1 可以放页面的某个隐藏div里面的 注释里面,然后通过字符串操作拿到
貌似也可以放隐藏的txtarea的value里面

2 每次都生成没什么的,基本上不差
aisensiy
2012-12-07 13:22:01 +08:00
我觉得你主要是为了复用方便对吧,那你可以把template单独写一个文件,然后在后端渲染的时候引入这个文件。
当然,这样感觉是又倒回去了,不过这样改成本比较小。
leben
2012-12-07 13:23:06 +08:00
@powerfj
1、因为我要在好几个页面都用这个弹出框,难道我要在每个用到的页面里面都放这个隐藏div?我以前从服务器端返回整个html,也是觉得每次都在客户端拼很麻烦。另外我感觉<script type="text/template" >比隐藏DIV好,你可以试试。
2、每次生成的麻烦就是,这个弹出层我要做两个模板,一个是第一次生成的时候,包括搜索框、标题这些在内的,另外一个仅仅包括行格式,每次搜索之后,用第二个生成row html,然后替换弹出层里面table>tbody。我就是觉得这个很麻烦。
leben
2012-12-07 13:25:13 +08:00
@aisensiy
后台用的PHP Codeigniter。
我再看backbone,对前端不是很熟,看着晕啊,呵呵。
greatghoul
2012-12-07 13:32:51 +08:00
我一般是
<script type="text/x-tmpl-mustache" id="tpl-alert">
<div class="alert {{#type}}alert-{{type}} {{/type}} fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
{{{ message }}}
</div>
</script>


然后用 https://github.com/janl/mustache.js

$('#tpl-alert').mustache({ type: type, message: message }).appendTo(...);
greatghoul
2012-12-07 13:34:15 +08:00
@leben 如果你是在很多个页面都用的话,把这部分放在一个公共的页面中,PHP里面 include 不就成了?
powerfj
2012-12-07 13:56:09 +08:00
@leben 和放script标签里面差不多,一般我都是放在那个需要填充的div里面,这样就知道哪个模板需要放哪里了,然后如果需要看效果把注释去掉就好.

对于两个模板这里,可以考虑放一个模板里面,子模板的概念,然后每次填充的时候就是子模板内容不一样
aisensiy
2012-12-07 14:12:39 +08:00
@leben @greatghoul ci 是个好框架,我也用过,我说的方法就是include即可。
bitsmix
2012-12-07 14:37:52 +08:00
jade
leben
2012-12-07 16:18:20 +08:00
@greatghoul
@powerfj
@aisensiy
谢谢,脑子抽筋了,老是把后端和前段分的那么清,的确用include就万事了,谢谢各位了。

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

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

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

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

© 2021 V2EX