使用handlebars-template模板來展現數據

之前用easyui等各類富客戶端的東西來展示表格,如今使用handlebars; ##1. handlebars基礎 handlebar相似於el表達式

<script id="task-table-template" type="text/x-handlebars-template">
{{#if content}}
	{{#each content}}
     <div class="col-sm-3 cl-padd" id="punish{{id}}">
		<div class="ratio-box">
			<div class="ratio-box-dd">
				<span class="label  label-blue">{{addOne @index}} </span> <span
					class="text-black jll">{{regionName}} </span> [ {{gt rate 10}} ]() <a
					class="text-blue-s jll"  data-toggle="modal"
					 onclick="modify('{{id}}','{{rate}}')">修改</a>
 				<a class="text-blue-s jll" data-toggle="modal" onclick="deletePunish('{{id}}')">刪除</a>
			</div>
		</div>
	</div>
	{{/each}}
{{/if}}
</script>
<script>
var myTemplate = Handlebars.compile($("#task-table-template").html());   1
$('#acont').html(myTemplate(data));    2
</script>

• 通常用{{key}}的形式來表示值;
• 1的目的是構建一個模板
• myTemplate(data)會返回一個html片斷,而後經過jquery的html()來添加這些片斷;
• 本例中的數據結構以下:

{content:[{"id":"1","rate":"20","regionName":"濟南"},{"id":"1","rate":"20","regionName":"濟南"}]}

• 使用if-else判斷

{{#if key}}   
   其餘代碼
  {{else}}
   其餘代碼
 {{/if}}

• 使用each遍歷,獲取遍歷下標,使用@index

{{#each key}}
<span class="label  label-blue">{{@index}} </span> 
{{each}}

##2.自定義函數

• 使用自定義的函數

{{#each key}}
 <span class="label  label-blue">{{addOne @index}} </span> 
{{each}}

• 須要在Handle註冊該表達式函數;固然,須要引入腳本

Handlebars.registerHelper("addOne", function(index) {
		// 返回+1以後的結果
		return index + 1;
	});
<script type="text/javascript" src="static/js/handlebars-v4.0.2.js"
		charset="utf-8"></script>

• 使用handlebars最大的好處應該是能夠定義靈活的helper表達式,對一些邏輯判斷的處理會很是方便 ##3.\ 自定義條件控制語句

{{#each mesList}}
		{{#compare roletype}}
   							<div class="panel-body">
								<span class="text-gery">{{ctime}}</span> <br>								
								<span class="text-time">{{content}}</span>
							</div>
	 {{else}}
							 <div   class="panel-body" style="margin-right: 30px ">
                             <div class="pull-right"><span class="text-gery">{{ctime}}</span> <span class="text-bluue">我</span></div><br><br>
                             <div class="pull-right" >{{content}}</div><br><br>
					        </div>
	{{/compare}}
{{/each}}

這裏的{{#compare value }}至關於{{#if}},註冊的js代碼以下:

Handlebars.registerHelper("compare", function(v1, options) {
		if (v1 == 1) {
			// 知足添加繼續執行
			return options.fn(this);
		} else {
			// 不知足條件執行{{else}}部分
			return options.inverse(this);
		}
	});

函數裏的options指的應該是一次加載操做;