mustache使用

Posted 2021-02-12 wmqiang

mustache模板，用于构造html页面的内容，

前端html代码：

<select name="itemtype" id="itemtype" class="optionlist"></select>

<select name="business" id="business" class="optionlist"></select>

 

前端javascript代码：

<!-- 下拉框模板 -->
    <script type="text/x-template" id="selecttmpl">
        {{#option}}
            <option value="{{value}}">{{text}}</option>
        {{/option}}
    </script>

 

$(function() {
　　// 模板引擎
　　var M = Mustache;

　　// 获取html页面中的模板x-template的值，根据id定位
　　selectmoudle = $("#selecttmpl").html();

　　// 获取需要赋值的模板
　　M.parse(selectmoudle);

　　// 通过ajax调用后台接口获取数据　　
　　iniselectmoudle();
　
}

var iniselectmoudle = function() {
 　　　　"iniselectmoudle" : "1"
        };
        Util.ajax({
            url : _settings.iniselectmoudle,
            data : requestData,
            type : ‘POST‘,
            success : function(response) {
                // 项目类型下拉
　　　　　　　　　　// 根据select标签的id属性值定位然后赋值
　　　　　　　     $(‘#itemtype‘).html(M.render(selectmoudle, {
                    option : response.itemtypeList
                }));
                // 申报主题下拉
　　　　　　　　　　// 根据后台接口返回的值JSONObject的String字符串类型，根据对应的key获取对应的value值，有些value值是JSONObject组成的list；

                $(‘#business‘).html(M.render(selectmoudle, {
                    option : response.constructionpropertyList
                }));
                
　　　　　　　　　　// 可以同时给多个标签赋值

　　　　　　　　　　// select控件初始化，模糊搜索
                /*
                 * $(".optionlist").chosen({ disable_search : true });
                 */
            }
        });
    }

 

后台action层业务管理层和service层业务逻辑实施层以及dao层数据访问层的restful接口的代码：

@RestController
@RequestMapping("/zwdtItem")
public class AuditOnlineItemController{
    /**
     *  咨询页面初始化下拉列表
     *  @param params 请求参数
     *  @param request HTTP请求
     * @return
     */
    @RequestMapping(value = "/iniselectmoudle", method = RequestMethod.POST)
    public String iniselectmoudle(@RequestBody String params, @Context HttpServletRequest request) {
        try {
            log.info("=======开始调用iniselectmoudle接口=======");
            JSONObject jsonObject = JSONObject.parseObject(params);
            String token = jsonObject.getString("token");
            if (ZwdtConstant.SysValidateData.equals(token)) {
                JSONObject obj = (JSONObject) jsonObject.get("params");
                
                // 可以根据前端ajax交互传回的参数执行判断执行不同的操作
                String iniselectmoudle = obj.getString("iniselectmoudle");

                // 获取相关数据以JSONObject组成的list形式返回前端，用于给模板select标签赋值
                List<CodeItems> itemtypeListTemp = iCodeItemsService.listCodeItemsByCodeName("并联审批项目类型");
                List<JSONObject> itemtypeList = new ArrayList<JSONObject>();
                for (CodeItems c : itemtypeListTemp) {
                    JSONObject objCode = new JSONObject();
                    objCode.put("value", c.getItemValue());
                    objCode.put("pId", "0");
                    objCode.put("text", c.getItemText());
                    itemtypeList.add(objCode);
                }

                // 调用方法返回由实体类或者JSONObject/Object类组成的ArrayList
                List<AuditSpBusiness> businessListTemp = auditOnlineConsultService.findAuditSpBusinessList();
                List<JSONObject> businessList = new ArrayList<JSONObject>();
                for (AuditSpBusiness auditSpBusiness : businessListTemp) {
                    JSONObject objCode = new JSONObject();
                    objCode.put("value", auditSpBusiness.getRowguid());
                    objCode.put("pId", "0");
                    objCode.put("text", auditSpBusiness.getBusinessname());
                    businessList.add(objCode);
                }

                JSONObject dataJson = new JSONObject();
                dataJson.put("itemtypeList", itemtypeList);
                dataJson.put("businessList", businessList);
                return JsonUtils.zwdtRestReturn("1", "初始化下拉列表成功", dataJson.toString());
            }
            else {
                log.info("=======结束调用iniselectmoudle接口=======");
                return JsonUtils.zwdtRestReturn("0", "身份验证失败！", "");
            }
        }
        catch (Exception e) {
            return JsonUtils.zwdtRestReturn("0", "初始化下拉列表失败：" + e.getMessage(), "");
        }
    }      
  
  
}

ArrayList是Array的复杂版本,是一种动态数组；