art-template 模板引擎 数组对象传递

 

 

需要填充select，其前端代码如下

        <div class="col-sm-4">
            <label for="selectBockNO">Block NO</label>
            <select class="form-control" id="selectBockNO" size="1" multiple title="按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项">
            </select>
        </div>

 

JQuery侦测到enter事件后，post获取数据，在正常获取到数据，然后利用art-template提供的template function获取html，

不过注意将数组对象先转化为对象集合（即下述{datas: data}），直接使用data,即只用template('tpl-select',data)是无效的。

 

var inputLotNO = $('#inputLotNO');

	inputLotNO.keydown(function (event) {

		if (event.keyCode == 13) {
			console.log(event.keyCode);
			var lotNO = inputLotNO.val().trim();
			if (lotNO.length == 0) {
				inputLotNO.focus();
				alert("没有Lot NO");
				return false;
			}
			$("#selectBockNO").empty();
			axios.post('/Home/LdsBlock', "strLot=" + lotNO).then(function (response) {
				console.log(response.data);
				if (response.status == 200) {
					var data = response.data;
					if (data.length > 0) {
						var strHtml = template('tpl-select', { datas: data });    //tpl-select是模板ID
						$("#selectBockNO").html(strHtml);					//document.getElementById("selectBockNO").innerHTML = strHtml;//#selectBockNo是需要填充元素ID
					}
				}
			}).catch(function (error) {
				console.log(error);
			});
		}
	}
	);

　　

模板如下，注意其与上述{ datas: data })中的datas要保持一致……若要声明datas中的item,index,可声明为 {{each item index}}，详细见其语法 http://aui.github.io/art-template/zh-cn/docs/syntax.html。

<script id="tpl-select" type="text/html">
    {{each datas }}
    <option>{{$value.BLOCK}}</option>
    {{/each}}
</script>

 

从后端拿到的数据如下，