关于js artTemplate模板引擎多数据注入的理解，与应用。

引入template-langtch.js(将原声语法中的%改为！) 和template-native.js(原声语法)；artTemplate模板，详情查看网址http://www.jq22.com/jquery-info1097；

模板注入：

varproductsTmpl = template("productsTmpl",data); productsTmpl为模板id；

$(productsTmpl).appendTo($("#answerList"));answerList为要注入的元素id；

数据注入：

多重数据注入：

思路：通过id来找数据，而不用在遍历数据。

多重数据再次注入在模板注入前给模板添加自定义函数。

template. helper(＂functionName＂,function(elm1,elm2,..){………})

通过实例来说明注入数据;

以问卷调查实例来说明

html：

<script type="text/html" id="productsTmpl">
   <div class="answer_name"><!=body.paperBase.fldName!></div>
   <div class="answer_desc"><!=body.paperBase.startDesc!></div>
<ul>
<!for(var i = 0;i < body.questionsData.length;i++){!>
<!var datas = body.questionsData[i]!>
<a id = "floor<!=(i+1)!>"></a>
<li class="list" id="<!=datas.questionId !>">
   
<div class="title" data-questionId="<!=datas.questionId!>" data-type="<!=datas.questionType!>">
<!=(i+1)!>.<!=datas.questionName!>
</div>
<!if(datas.questionType==3){!>
<!var hasData = getItemData(datas)!>
<div class="box numberbox">
<input type="number" class="number" value="<!=hasData!>">
</div>
<!}else if(datas.questionType == 0){!>
<! var hasData = getItemData(datas) !>
<div class="box textarea_box">
<textarea rows="4"><!=hasData !></textarea>
</div>
<!}else if(datas.questionType==4){!>
<!var hasData = getItemData(datas)!>
<div class="box numbersbox">
<input type="number" class="before" value="<!=hasData.min!>" /><span>-</span><input type="number" class="after" value="<!=hasData.max!>" />
</div>
<!} else if (datas.questionType == 2){!>
<div class="list_box">
<!for(var j = 0 ;j < datas.questionItemDatas.length;j++){!>
<!var data = datas.questionItemDatas[j]!>
<!var hasData = getItemData(datas)!>
<div class="checkbox_box box">
<input class="checkbox" type="checkbox" name="checkbox<!=i!>" <!=hasData[data.itemId] ? "checked=checked" : ""!> data-itemId="<!=data.itemId!>"><span class="name"><!=data.itemName!></span>
<!if(data.isMark==1){!>
<input type="text" class="text" value='<!=hasData[data.itemId] ? hasData[data.itemId].content : ""!>' />
<!}!>
<span class="checked_checkbox"></span>
</div>
<! } !>
</div>
<! } else if (datas.questionType == 1) { !>
<div class="list_box">
<!for(var j = 0 ;j < datas.questionItemDatas.length;j++){!>
<!var data = datas.questionItemDatas[j]!>
<!var hasData = getItemData(datas)!>
<div class="radio_box box">
<input class="radio" type="radio" name="radio<!=i!>" <!=hasData[data.itemId] ? "checked=checked" : ""!> data-itemId="<!=data.itemId!>" /><span class="name"><!=data.itemName!></span>
<!if(data.isMark==1){!>
<input type="text" class="text" value='<!=hasData[data.itemId] ? hasData[data.itemId].content : ""!>' />
<!}!>
<span class="checked_radio"></span>
</div>
<! } !>
</div>
<! } !>
</li>
<!}!>
</ul>
</script>

首先根据思路我们给每一个独立的问卷题目添加id ，而id对应数据获取的问题id

<li class="list" id="<!=datas.questionId!>">

每一个问题的type都是不同的所以我们通过判断不同的类型来注入数据（很好的思路）。

对应的多数据插入我们发现 会有一个<!var hasData = getItemData(datas)!>这便是在js中给模板自定义的一个函数。下面我们跳转到js中理解自定义函数的机制。

js：

自定义函数getItemData，思路:我们同样通过问题的类型来分别注入数据，其传入的参数datas1为html中的全部数据datas。；

首先如果是多选的问题类型，那么他的数据肯定时多条的，我们可以创建一个自由变量data来保存获取的数据。var data= {}；在遍历数据的时候我们把获取的数据赋值给之前创建的变量data，注意的是当我们注入数据的时候要注意的是我们要按照答案id来找数据所以，不同的答案id下应该是不同的答案 id和content因此在注入的时候我们是

data[datas1.answerDatas[j].itemId]= { id : datas1.answerDatas[j].itemId,content:datas1.answerDatas[j]. content }

那么对应的答案id的下面的值便是其相同答案id所对应的答案id和content。

对应只有一个值得我们直接返回值便可以了，不过还是按json的方式组成。

template.helper("getItemData", function(datas1) {
if (parseInt(datas1.questionType) == 2 || parseInt(datas1.questionType) == 1) {
var data = {};
if (datas1.answerDatas.length > 0) {
for (var j = 0; j < (datas1.answerDatas.length); j++) {
data[datas1.answerDatas[j].itemId] = {
id: datas1.answerDatas[j].itemId,
content: datas1.answerDatas[j].content
};
}
return data;
} else { 
return data;
}
} else if (datas1.questionType == 4) {
return (datas1.answerDatas.length > 0 ? {
min: datas1.answerDatas[0].minNum,
max: datas1.answerDatas[0].maxNum
} : {
min: "",
max: ""
});
} else if (datas1.questionType == 3) {
return (datas1.answerDatas.length > 0 ? datas1.answerDatas[0].maxNum : "");
} else if (datas1.questionType == 0) {
return (datas1.answerDatas.length > 0 ? datas1.answerDatas[0].content : "");
}
});
var productsTmpl = template("productsTmpl", data);
$(productsTmpl).appendTo($("#answerList"));

提交数据：

在js开始创建一个自由变量cacheData=[]；然后将ajax获取的数据赋值给cacheData。

在提交数据的时候answers答案是不同问题的答案所组成的所以用字符串的方式来拼接，首先还是要遍历所有的问题，之前我们创建了自由变量cacheData用来缓存问题数据，因此直接遍历cacheData.length 。那么问题的id我们就可以写成：

varquestionId = cacheData[i].questionId;

其次我们之前给每一个问题添加了id标签，标签名为问题的id，那么我们也将其找出并用变量来表示

varcurrentDom =$(＂#＂+questionId);

现在我们要判断哪问题客户没有填写，同理，我们根据问题的类型来分别判断。

判断当前为题客户没有填写我们可以通过问题的id来找到问题下面的input元素的value的值是否为空如果为空那么提示客户，并锚链接到问题的位置。如果不为空就拼接答案。

要注意的是多选题，由于答案十多个，因此在不为空的情况下我们要each每一个答案，并且拼接每一个答案的id和content。

var answers = "";
for (var i = 0; i < cacheData.length; i++) {
var question = cacheData[i];
var questionId = question.questionId;
var currentDom = $("#" + questionId);
var id = "floor"+(i+1);
if (question.questionType == 1) {
if (currentDom.find("input[type='radio']:checked").val() == null) {
weui.Dialog.confirm({content:"请填写第" + (i + 1) + "道题",okFunction:function(){ tiaozhuan(id); }});
return;
} else {
var daanid = currentDom.find("input[type='radio']:checked").attr("data-itemid");
var daan = currentDom.find("input[type='radio']:checked").siblings(".text").val();
answers += questionId + "^" + question.questionType + "^" + daanid + "|" + daan + "#"
}
} else if (question.questionType == 2) {
if (currentDom.find("input[type='checkbox']:checked").val() == null) {
weui.Dialog.confirm({content:"请填写第" + (i + 1) + "道题",okFunction:function(){ tiaozhuan(id); }});
return;
} else {
answers += questionId + "^" + question.questionType + "^";
currentDom.find("input[type='checkbox']:checked").each(function() {
var daanid1 = $(this).attr("data-itemid");
var daan1 = $(this).siblings(".text").val();
answers += daanid1 + "|" + daan1 + "β";
});
answers = answers.slice(0, answers.length - 1) + "#";
}
} else if (question.questionType == 3) {
if (!currentDom.find(".number").val()) {
weui.Dialog.confirm({content:"请填写第" + (i + 1) + "道题",okFunction:function(){ tiaozhuan(id); }});
return;
} else {
var daan2 = currentDom.find(".number").val();
answers += questionId + "^" + question.questionType + "^" + daan2 + "#";
}
} else if (question.questionType == 0) {
if (!currentDom.find("textarea").val()) {
weui.Dialog.confirm({content:"请填写第" + (i + 1) + "道题",okFunction:function(){ tiaozhuan(id); }});
return;
} else {
var daan3 = currentDom.find("textarea").val();
answers += questionId + "^" + question.questionType + "^" + daan3 + "#";
}
} else if (question.questionType == 4) {
if (!currentDom.find(".before").val() || !currentDom.find(".after").val()) {
weui.Dialog.confirm({content:"请填写第" + (i + 1) + "道题",okFunction:function(){ tiaozhuan(id); }});
return;
} else {
var daanbefore = currentDom.find(".before").val();
var daanafter = currentDom.find(".after").val();
answers += questionId + "^" + question.questionType + "^" + daanbefore + "β" + daanafter;
}
}
}