js 模板引擎 art-template 完整使用案例，如何渲染、外部函数注册调用、if else each等流程控制
art-template 是一个简约、超快的模板引擎，具体可参考其中文文档说明。
本文通过一个订单详情展示DEMO，阐述art-template的使用方法，包括：
1）js type=“text/html” 模板定义
2）template过滤器注册，同早期版本的helper函数
3）template模板渲染
4）url参数解析
具体，参考下述DEMO
1、DEMO 源码
<html class="page-feature">
<head>
<meta charset="UTF-8">
<title>ART Template Demotitle>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script>
<script src="../assets/js/lib/template-web.js">script>
head>
<style type="text/css">
style>
<body>
<div class="page-content oy-auto container">
<div class="page-body">
<div class="panel panel-default mb10" id="ordermain">
<div class="panel-heading">
<h3 class="panel-title">订单概要信息h3>
div>
<table id="table-ordermain" class="table table-bordered">
<tbody><tr><td>抱歉, 订单不存在!td>tr>tbody>
table>
div>
<div class="panel panel-default mb10" id="orderdetail">
<div class="panel-heading">
<h3 class="panel-title">订单行项目h3>
div>
<table id="table-orderdetail" class="table table-bordered">
<tbody>tbody>
table>
div>
div>
div>
<script id="so-main" type="text/html">
{{if !bill_no}}
<tr><td>抱歉, 订单不存在!</td></tr>
{{else}}
<tr>
<td width="15%">订单信息：</td>
<td width="85%">{{bill_type}}订单: {{bill_no}}, 状态： {{status}} , 含税金额: {{goods_money}}元</td>
</tr>
<tr>
<td>供应商：</td>
<td>{{supplier_name}}</td>
</tr>
<tr>
<td>采购单位：</td>
<td>{{org_name}}</td>
</tr>
<tr>
<td>交货日期：</td>
<td>{{deal_date}}</td>
</tr>
<tr>
<td>联系人信息：</td>
<td>联系人：{{contact}}，联系电话：{{mobile}} {{tel}}，联系地址：{{deal_address}}</td>
</tr>
{{if memo}}
<tr>
<td>备注：</td>
<td>{{memo}}</td>
</tr>
{{/if}}
<tr>
<td>创建人/时间：</td>
<td>{{create_uid}}，{{timeRender(create_time)}}</td>
</tr>
{{/if}}
script>
<script id="so-detail" type="text/html">
{{if !bill_no}}
<tr><td>抱歉, 订单不存在!</td></tr>
{{else}}
<tr>
<td width="40px">序号</td>
<td width="70px">物料代码</td>
<td width="180px">物料名称</td>
<td width="70px">采购数量</td>
<td width="50px">单位</td>
<td width="70px">含税价格</td>
<td width="70px">含税金额</td>
<td width="60px">折扣率</td>
<td width="60px">状态</td>
<td width="180px">仓库</td>
<td width="70px">收货数量</td>
<td width="70px">入库数量</td>
</tr>
{{each rows as row i}}
<tr>
<td>{{i+1}}</td>
<td>{{row.goods_no}}</td>
<td>{{row.goods_name}}</td>
<td>{{row.goods_count}}</td>
<td>{{row.unit_name}}</td>
<td>{{row.goods_price}}</td>
<td>{{row.goods_money}}</td>
<td>{{row.discount_rate}}</td>
<td>{{row.status}}</td>
<td>{{row.ware_name}}</td>
<td>{{row.sh_count}}</td>
<td>{{row.pw_count}}</td>
</tr>
{{/each}}
{{/if}}
script>
<script>
var bill_no = getParam("bill_no"), mainInfo = {};
function getParam(name) {
var _url = window.location.href;
if(_url.indexOf("?")>=0) {
_url = _url.substr(_url.indexOf("?") + 1);
}
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = _url.match(reg); //匹配目标参数
if (r != null) return decodeURIComponent(r[2]); return null; //返回参数值
};
$(function(){
template.defaults.imports.timeRender = function(data) {
return "timeRender: " + data; //格式化时间，请自行实现
}
// 查询主表信息
if (bill_no == '1212') {
mainInfo = {bill_no: bill_no, bill_type: '正常', goods_money: 1156.8, status: '录入', create_uid: '1001', create_time: new Date,
supplier_name: '供应商ABCDFGGDFDFDF', org_name: '采购单位-112信息部.', deal_date: '2019-05-08'}
$("#table-ordermain tbody").html(template("so-main", mainInfo));
//
var rows = [
{goods_no: '1001', goods_name: '物料101001', goods_count: 100, unit_name: '箱', goods_price: 100, goods_money: 10000,
discount_rate: 1, ware_name: '入库仓库1', status: '录入', sh_count:0, rk_count: 0},
{goods_no: '1002', goods_name: '物料101002', goods_count: 105, unit_name: '箱', goods_price: 90, goods_money: 9450,
discount_rate: 1, ware_name: '入库仓库1', status: '录入', sh_count:0, rk_count: 0},
];
$("#table-orderdetail tbody").html(template("so-detail", {bill_no: bill_no, rows: rows}));
} else {
$("#table-ordermain tbody").html(template("so-main", {}));
$("#table-orderdetail tbody").html(template("so-detail", {}));
}
});
script>
body>
html>
2、DEMO说明
1）引用的template-web.js，可下载 template-web.js, gzip 6K
2）template.defaults.imports.timeRender，没有真正实现，只是演示如何注册过滤器或者说外部辅助函数
3）为了演示简单，模板并未使用.art文件；
4）通过if,else和each实现找到订单则显示订单详情，没找到则显示“订单不存在”错误提示信息.