一、簡單示例

程式碼：

 1             function show(t) {
 2                 $("#content").html(t);
 3             }
 4 
 5             var view = {
 6                 title: 'YZF',
 7                 cacl: function () {
 8                     return 6 + 4;
 9                 }
10             };
11             $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

結果：

YZF spends 10

結論：

可以很明顯的看出Mustache模板的語法，只需要使用{{和}}包含起來就可以了，裡面放上物件的名稱。

通過本示例也可以看出，如果指定的屬性為函式的時候，不會輸出函式裡面的內容，而是先執行函式，然後將返回的結果顯示出來。

 二、不轉義html標籤

程式碼：

1             var view = {
2                 name: "YZF",
3                 company: "<b>ninesoft</b>"
4             };
5             show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

 結果：

結論：

通過這個示例可以看出Mustache預設是會將值裡面的html標記進行轉義的，但是有時候我們並不需要。

所以這裡我們可以使用{{{和}}}包含起來，或者是{{&和}}包含，那麼Mustache就不會轉義裡面的html標記。

三、繫結子屬性的值

程式碼：

1             var view = {
2                 "name": {
3                     first: "Y",
4                     second: "zf"
5                 },
 
6                 "age": 21
7             };
8             show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

 結果：

結論：

相信看到第一個示例的時候，就會有人想到能不能繫結子屬性，如果你努力看下去了。

那麼祝賀你，現在就是解決你的需求的方式，僅僅只需要通過.來使用子屬性即可。

四、條件式選擇是否渲染指定部分

程式碼：

1             var view = {
2                 person: false
3             };
4             show(Mustache.render("eff{{#person}}abc{{/person}}", view));

 結果：

結論：

問題總是不斷，如果我們還需要能夠根據我們給的值，決定是否渲染某個部分。

那麼現在就可以解決這個問題，當然還要提示的就是不僅僅是false會導致不渲染指定部分。

null，空陣列，0，空字串一樣有效。語法上面比較簡單，就是使用{{#key}} ... {{/key}}

來控制中間的內容。

五、迴圈輸出

程式碼：

1             var view = {
2                 stooges: [
3                     { "name": "Moe" },
4                     { "name": "Larry" },
5                     { "name": "Curly" }
6                 ]
7             };
8             show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

結果：

結論：

僅僅學會上面的方式，大部分地方你都解決了，但是還是會出現麻煩的地方。

就是迴圈輸出，如果你一個一個寫，相信會很煩躁，當然Mustache不會讓我們失望，

它也給出瞭如何迴圈輸出的方式，這裡是將一個由物件組成的陣列輸出，如果我們

輸出的是陣列，就需要使用{{.}}來替代{{name}}。

六、迴圈輸出指定函式處理後返回的值

程式碼：

 1             var view = {
 2                 "beatles": [
 3                     { "firstname": "Johh", "lastname": "Lennon" },
 4                     { "firstname": "Paul", "lastname": "McCartney" }
 5                 ],
 6                 "name": function () {
 7                     return this.firstname + this.lastname;
 8                 }
 9             };
10             show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

 結果：

結論：

迴圈輸出是有了，但是我們還想後期進行加工。那麼這個完全符合你的需要，因為Mustache會將

陣列中的值傳遞給你的函式，輸出你函式返回的值。這裡我們可以看到最外層是陣列，只要在裡面

使用函式那麼外層的陣列就會作為這個函式的引數傳遞進去。

七、自定義函式

程式碼：

1             var view = {
2                 "name": "Tater",
3                 "bold": function () {
4                     return function (text, render) {
5                        return render(text) + "<br />";
6                     }
7                 }
8             }
9             show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

 結果：

結論：

上面我們都是用的變數作為節，那麼我們現在用函式作為節，會有什麼效果呢。

它會呼叫我們函式返回的函式，將節中間的原始字串作為第一個引數，預設

的直譯器作為第二個引數，那麼我們就可以自行加工。

八、反義節

程式碼：

1 var view = {
2                 "repos": []
3             };
4             show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

 結果：

結論：

上面我們也用節，但是僅僅只能選擇是否輸出某個部分。所以這裡我們彌補一下。

如果我們使用了{{^和}}來定義節的話，那麼這個部分只會在裡面的值為空，null，

空陣列，空字串的時候才會顯示。那麼我們就可以實現了if else的效果了。

九、部分模板

程式碼：

 1             var view = {
 2                 names: [
 3                     { "name": "y" },
 4                     { "name": "z" },
 5                     { "name": "f" }
 6                 ]
 7             };
 8             var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
 9             var name = "<b>{{name}}</b>";
10             show(Mustache.render(base, view, { user: name }));

 結果：

結論：

Mustache雖然節約了很多時間，但是我們定義了很多模板，但是彼此之間無法互相巢狀使用，也會造成繁瑣。

所以這裡我們還要介紹如何定義部分模板，用來在其他模板裡面使用，這裡使用其他模板的方式僅僅是{{>templetename}}。

最大的不同就是Mustache.render方法有了第三個引數。

十、預編譯模板

程式碼：

1             Mustache.parse(template);
2             //其他程式碼
3             Mustache.render(template,view);

結論：

模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預先編譯好這個模板，以便後面的使用。

<%@ page pageEncoding="UTF-8"%>
<%@ include file="/pages/common/tags.jsp"%>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<%@ include file="/pages/common/meta.jsp" %>
</head>
<div class="eaxm-area-manage">
<form id="formEdit" action="" class="m-form">
<div class="f-fixed">
<div class="f-fl" style="width:100%;">
<ul>
<input type="hidden" name="groupID" value="${group.groupID }">
<input type="hidden" id="typeID" value="${group.typeID }">
<input type="hidden" name="schoolID" >
<input type="hidden" name="schoolName">
<li class="form-item">
<label for="" class="title">圈子名稱：</label>
<div class="con">
<input type="text" id="groupName" name="groupName" value="${group.groupName }" <c:if test="${not empty type.groupID}">readonly="readonly"</c:if>  required validate="true">
</div>
</li>
<li class="form-item">
<label for="" class="title">圈子類別：</label>
<div class="con">
<input <c:if test="${empty group.typeFlag or group.typeFlag == 1}">checked="true"</c:if>  type="radio" name="typeFlag" value="1">官方</input>
<input <c:if test="${group.typeFlag == 2 }">checked="true"</c:if>  type="radio" name="typeFlag" value="2">普通</input>
<input <c:if test="${group.typeFlag == 3 }">checked="true"</c:if> type="radio" name="typeFlag" value="3">學校</input>
</div>
</li>
<li class="form-item">
<label for="" class="title">圈子分類：</label>
<div class="con">
<select name="typeID" required validate="true" class="J_typeID">
<option value="">請選擇</option>
</select>
</div>
</li>
<li class="form-item">
<label for="" class="title">驗證標記：</label>
<div class="con">
<input <c:if test="${empty group.verifyFlag or group.verifyFlag == 3 }">checked="true"</c:if> type="radio" name="verifyFlag" value="3">允許任何人</input>  
</div>
</li>
<li class="form-item">
<label for="" class="title">熱門標記：</label>
<div class="con">
<input <c:if test="${empty group.isHot or group.isHot == 0}">checked="true"</c:if>  type="radio" name="isHot" value="0">否</input>
<input <c:if test="${group.isHot == 1 }">checked="true"</c:if> type="radio" name="isHot" value="1">是</input>
</div>
</li>
<li class="form-item">
<label for="" class="title">停用標記：</label>
<div class="con">
<select name="stopFlag" required>
<option value="1" <c:if test="${group.stopFlag == 1}">selected</c:if>>啟用</option>
<option value="2" <c:if test="${group.stopFlag == 2}">selected</c:if>>禁用</option>
</select>
</div>
</li>
<li class="form-item">
<label for="" class="title">圖示：</label>
<div class="con">
<input type="hidden" name="iconURL" id="icon" value="${group.iconURL}" readonly required>
<input type="button" id="fileup-mainUrl">(只允許上傳png的檔案)
<div id="progress-files" class="f-dn"></div>
</div>
</li>

<li class="form-item" id="J_school" <c:if test="${empty group.typeFlag or group.typeFlag == 1 or group.typeFlag == 2 }">style="display:none;"</c:if> >
<label for="" class="title">所屬學校：</label>
<div class="con">
<select name="schoolID" required>
<option value="">請選擇</option>
<c:forEach items="${schoolList}" var="item">
<option value="${item.schoolId}" <c:if test="${item.schoolId == group.schoolID}">selected</c:if>>${item.schoolName}</option>
</c:forEach>
</select>
</div>
</li>

<input type="text" style="display:none" id="provCityName" name="provCityName" value="" readonly>
<li class="form-item" id="J_putong" <c:if test="${empty group.typeFlag or group.typeFlag == 1 or group.typeFlag == 3 }">style="display:none;"</c:if> >
<label for="" class="title">所在地區：</label>
<input type="text" style="display:none" id="cityCodeHidden" value="${group.cityCode}" readonly>
<div class="con">
<select id="proviceCode" name="proviceCode" required>
<c:forEach items="${zoneList}" var="zone">
<option value="${zone.zoneNo}" <c:if test="${zone.zoneNo == group.proviceCode}">selected</c:if>>${zone.zoneName}</option>
</c:forEach>
</select>

<select id="cityCode" name="cityCode" required>
<!-- <option value="">請選擇</option> -->
</select>
</div>
</li>
<li class="form-item">
<label for="" class="title">備註：</label>
<div class="con">
<textarea name="remark" id="remark" style="font-size:100%;" >${group.remark}</textarea>
</div>
</li>
</ul>
</div>
</div>
<div class="p-center">
<input type="button" value="儲存" class="u-btn u-btn-nm u-btn-orange J_edit_save">
</div>
</form>
</div>

<textarea id="tableRowTpl" class="f-hide">
<option value="">請選擇</option>
{{#typeList}} 
<option value="{{typeID}}" data-schoolID="{{schoolID}}"  data-schoolName="{{schoolName}}">{{typeName}}</option>
{{/typeList}} 
</textarea> 
<script>
seajs.use('hulaquan/groups/group/groupEdit');
</script>
</body>
</html>

define(function(require, exports, module) {
var $ = require('jquery');
var Utils = require('utils');
var validator = require('validator');
var SWFUpload=require("fileupload");
var FileProgress = require('fileprogress');
var Dialog = require('dialog');
var Mustache = require('mustache');
var groupEdit = {
init : function() {
this.initTpl();//初始化模板
this.bindEvent();//繫結事件
this.initData();
this.initUploadFile("fileup-mainUrl","icon","*.png","1");
$('#formEdit').initValidator();
},
initTpl : function(){
this.tableRowTpl = $("#tableRowTpl").val();
},
initData : function(){
var _this = this;
var typeFlag = $(' input[name="typeFlag"]:checked ').val(); 
 $.ajax({
type : "get",
url : ctx + "/auth/hulaquan/groups/groupsType/queryGroupType.htm",
data:{typeFlag : typeFlag , businessType:2 },
dataType : "json",
success : function(json) {
var output = Mustache.render(_this.tableRowTpl, json.datas);
$('.J_typeID').html(output);
var typeID = $('#typeID').val();
$('.J_typeID').val(typeID);
}
});
},
bindEvent : function() {
var _this = this;

$(function (){
getCity();
})

$("#proviceCode").change(function(){
 getCity();
});

function getCity() {
var provCode = $("#proviceCode").val();
$.ajax({
type : "POST",
url : ctx + "/auth/hulaquan/groups/group/city.htm",
dataType : "json",
data:{paZoneNo:provCode},
success : function(json) {
if (json.success) {
$("#cityCode").empty();
$.each(json.datas.cityList , function (n, city) {
var cityCode = $("#cityCodeHidden").val();
var city_html ="";
if (city.zoneNo == cityCode) {
city_html = "<option value='" + city.zoneNo +"' selected> "+city.zoneName +"</option>";
}else{
city_html = "<option value='" + city.zoneNo +"'> "+city.zoneName +"</option>";
}
$("#cityCode").append(city_html);
});

} else {
Utils.Notice.error(json.message);
}
},
});
}

//
$("input[name=typeFlag]").on("click",function(){
var $val = $(this).val();
if($val==1){
$("#J_putong").hide();
}else if($val==2){
$("#J_putong").show();
}else if($val==3){
$("#J_putong").hide();
}
});

//根據選擇類別冗餘學校id,名稱
$("select[name=typeID]").on("click",function(){
var typeID = $('.J_typeID option:selected').val(); 
var typeFlag = $(' input[name="typeFlag"]:checked ').val(); 
if (typeFlag == 3) {//類別是學校
var schoolID = $('.J_typeID option:selected').attr('data-schoolID');
var schoolName = $('.J_typeID option:selected').attr('data-schoolName');
$("input[name='schoolID']").val(schoolID);
$("input[name='schoolName']").val(schoolName);
} else {
$("input[name='schoolID']").val('');
$("input[name='schoolName']").val('');
}
});

//圈子分類資料獲取
$("input[name='typeFlag']").change(function(){
var typeFlag = $(' input[name="typeFlag"]:checked ').val(); 
 $.ajax({
type : "get",
url : ctx + "/auth/hulaquan/groups/groupsType/queryGroupType.htm",
data:{typeFlag : typeFlag , businessType:2 },
dataType : "json",
success : function(json) {
var output = Mustache.render(_this.tableRowTpl, json.datas);
$('.J_typeID').html(output);
}
});
});

//儲存
$('.J_edit_save').click(function(e){
e.preventDefault();
var provName = $("select[name='proviceCode']").find("option:selected").text();
var cityName = $("select[name='cityCode']").find("option:selected").text();
$("#provCityName").val(provName + cityName);
var $btn = $(this);
var bValidate = $('#formEdit').validate();
if(!bValidate) {
return;
} 
var groupName = $("#groupName").val();
if (groupName.length > 15) {
Utils.Notice.alert("圈子的名稱長度最大不超過15個字");
return;
}
var remark = $("#remark").val();
if (remark.length > 1020) {
Utils.Notice.alert("備註的長度最大不超過1020個字");
return;
}
if ($btn.attr('isC') == '1') {
return;
}
$btn.attr('isC','1');

$.ajax({
type : "POST",
url : ctx + "/auth/hulaquan/groups/group/saveGroup.htm",
dataType : "json",
data:$('#formEdit').serialize(),
beforeSend:function(){
$btn.addClass('u-btn-gray');
$btn.val('儲存中...');
},
success : function(json) {
if (json.success) {
Utils.Notice.alert(json.message);
setTimeout(function(){
Dialog.submit('group-edit','submit');
},700);
} else {
Utils.Notice.error(json.message);
}
},
complete:function(){
$btn.attr('isC','0');
$btn.removeClass('u-btn-gray');
$btn.val('儲存');
}
});
});
},

initUploadFile : function(fileUp, filePath, fileType, fileMaxNum){
       var ticket = $('#jTicket').val();
    //附件數量
    self._fu = SWFUpload.createFileUpload({
    context: ctx, 
    upload_url: fileCenterSN + '/common/student/stu_file_upload.htm?ticket=' + ticket,
    button_placeholder_id: fileUp,
    file_size_limit: '15MB',
    file_types: fileType,
    file_types_description: '檔案',
    file_post_name: 'file',
    file_upload_limit: fileMaxNum,
    file_queue_limit: 1,
    custom_settings : {
    progressTarget : 'progress-files'
    }
    }, FileProgress, {
    deleteFile: function(datas) {
    $('#'+filePath).val('');
    },
    uploadSuccess: function(datas) {
    var stats = self._fu.getStats();
    stats.successful_uploads = 0; 
    self._fu.setStats(stats);
    $('#'+filePath).val(datas.longUrl);
    var tid = new Date().getTime();
    },
    onError: function(msg) {
    Utils.Notice.error(msg);
    }
    });
}

};
groupEdit.init();
});

喜歡的朋友可以掃描我的個人公眾號，有好東西可以一起分享。

也可以微信搜尋公眾號：Java程式設計師那些事