javascript 模板库 Handlebars 简单教程（一）

在做项目的时候，经常会遇到需要使用javascript给页面动态添加一大段HTML代码，结果会导致代码可读性大大降低，并难以维护，就像下面这样：

var htmls = '';
	htmls += '<tr>';
	htmls += "<td><input type='checkbox'></input></td>";
	htmls += "<td>选项名：</td>";
	htmls += "<td><input type='text'></input></td>";
	htmls += "</tr>";

尤其是当需要在这段代码中插入变量的时候就更恶心了，所以在接下来的开发中，我选择Handlebars（http://handlebarsjs.com/） 点击打开链接 工具来代替这种行为。

下面简单介绍一下Handlebars这个工具如何使用。

<div id='test' class="item">
	<div class="bigtitle">
		<span class="itemTitle">title</span>
		<span alt='test' class="upBtn"></span><span alt='test' class="downBtn"></span><span alt='test' class="closeBtn"></span>
	</div>
	<div>	
		<span class="itemContent">yyyyyyyyyyyyyyyyyyyy</span>
	</div>
</div>

假如现在想要在HTML中动态加入下面代码，则可以像下面这样定义，并添加到</body>前面。

 <script id="taskItem" type="text/x-handlebars-template">
	<div id='{{id}}' class="item">
	   <div class="bigtitle">
	   <span class="itemTitle">{{title}}</span>
		<span alt='{{id}}' class="upBtn"></span><span alt='{{id}}' class="downBtn"></span><span alt='{{id}}' class="closeBtn"></span>
	   </div>
	   <div>	
		<span class="itemContent">{{content}}</span>
	   </div>
	</div>
</script>

id="taskItem"唯一标识这段代码，并将在后面调用。

{{id}}中的变量可以在下面的代码中被传入的参数赋值。

接下来利用这个模板生成HTML代码：

context为传入参数的键值对，对应代码中{{}}中的内容。

var source   = $("#taskItem").html();

var template = Handlebars.compile(source);

var content = {'id':id,'title':text,'content':contents};

var html = template(content );

html为最终生成的HTML代码片段。

通过$('#xxxx').html(html);就可以将这段代码添加到HTML中了。

以上只是Handlebars这个工具最基础的使用方法，Handlebars工具还蛮强大的，用法还远不止这些。

其他的一些用法会在以后的文章中介绍。