求Javascript template的最佳实践

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4370 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

感觉用template在生成html这个阶段的确很方便，但是如果涉及复用和数据刷新就不是特别舒服。
没有经验，求有经验的给点儿指点，谢谢！

HTML

table

弹出

10 条回复 • 1970-01-01 08:00:00 +08:00

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就万事了，谢谢各位了。