JavaScript中的template模板引擎的使用

关于模板引擎不在此做过多介绍，只将项目代码分享一下：
前端html代码
前端html中需要引用template.js 文件，这个自己可以去百度寻找。这个引入要放在jQuery后面，因为它里面会使用到jQuery。

      <div class="form-group">
                            <label for="area-id">所在城区</label>
                            <select class="form-control" id="area-id" name="area_id">
                              <!--<option value="1">东城区</option>-->
                              <!--<option value="2">西城区</option>-->
                              <!--<option value="3">朝阳区</option>-->
                              <!--<option value="4">海淀区</option>-->
                              <!--<option value="5">昌平区</option>-->
                              <!--<option value="6">丰台区</option>-->
                              <!--<option value="7">房山区</option>-->
                              <!--<option value="8">通州区</option>-->
                              <!--<option value="9">顺义区</option>-->
                              <!--<option value="10">大兴区</option>-->
                              <!--<option value="11">怀柔区</option>-->
                              <!--<option value="12">平谷区</option>-->
                              <!--<option value="13">密云区</option>-->
                              <!--<option value="14">延庆区</option>-->
                              <!--<option value="15">石景山区</option>-->
                              <!--<option value="16">门头沟区</option>-->
                            </select>
                            <!--使用模板引擎-->
                            <script type="text/html" id="area-tmpl">
                                {{each areas as area}}
                                <option value="{{area.aid}}">{{area.aname}}</option>
                                {{/each}}
                            </script>
                        </div>

之前是自己写入的城区信息，但是这种写法不够动态，于是我们去数据库动态的获取城区信息

js代码

$(document).ready(function(){
    // $('.popup_con').fadeIn('fast');
    // $('.popup_con').fadeOut('fast');
    //向后端获取城区的信息
    $.get("/api/v1_0/areas",function (resp) {
        if(resp.errno==0){
        //    获取到了城区信息
        //     var areas=resp.data.areas;
        //     for(i=0;i<areas.length;i++){
        //         var area=areas[i];
        //         $("#area-id").append('<option value="'+area.aid+'">'+area.aname+'</option>');
        //     }
        //    使用模板引擎传递参数
            area_html=template("area-tmpl",{areas:resp.data.areas});
            $("#area-id").html(area_html);
        }
    })
});

上面屏蔽的那种方法，是常规的写法，而使用模板引擎更为简便。

后端的逻辑就不上传了，主要就是去数据库中查询数据，然后将数据以json格式返回给前端即可。