求Javascript template的最佳实践

This topic created in 4913 days ago, the information mentioned may be changed or developed.

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

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

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

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

HTML

table

弹出

10 replies 1970-01-01 08:00:00 +08:00

powerfj

Dec 7, 2012

1 可以放页面的某个隐藏div里面的注释里面，然后通过字符串操作拿到
貌似也可以放隐藏的txtarea的value里面

2 每次都生成没什么的，基本上不差

aisensiy

Dec 7, 2012

我觉得你主要是为了复用方便对吧，那你可以把template单独写一个文件，然后在后端渲染的时候引入这个文件。
当然，这样感觉是又倒回去了，不过这样改成本比较小。

leben

Dec 7, 2012

@powerfj
1、因为我要在好几个页面都用这个弹出框，难道我要在每个用到的页面里面都放这个隐藏div？我以前从服务器端返回整个html，也是觉得每次都在客户端拼很麻烦。另外我感觉<script type="text/template" >比隐藏DIV好，你可以试试。
2、每次生成的麻烦就是，这个弹出层我要做两个模板，一个是第一次生成的时候，包括搜索框、标题这些在内的，另外一个仅仅包括行格式，每次搜索之后，用第二个生成row html，然后替换弹出层里面table>tbody。我就是觉得这个很麻烦。

leben

Dec 7, 2012

@aisensiy
后台用的PHP Codeigniter。
我再看backbone，对前端不是很熟，看着晕啊，呵呵。

greatghoul

Dec 7, 2012

我一般是
<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

Dec 7, 2012

@leben 如果你是在很多个页面都用的话，把这部分放在一个公共的页面中，PHP里面 include 不就成了？

powerfj

Dec 7, 2012

@leben 和放script标签里面差不多，一般我都是放在那个需要填充的div里面，这样就知道哪个模板需要放哪里了，然后如果需要看效果把注释去掉就好.

对于两个模板这里，可以考虑放一个模板里面，子模板的概念，然后每次填充的时候就是子模板内容不一样

aisensiy

Dec 7, 2012

@leben @greatghoul ci 是个好框架，我也用过，我说的方法就是include即可。

bitsmix

Dec 7, 2012

jade

leben

Dec 7, 2012

@greatghoul
@powerfj
@aisensiy
谢谢，脑子抽筋了，老是把后端和前段分的那么清，的确用include就万事了，谢谢各位了。