简单的模板引擎--2016.04.18_4.实现一个最简单的模板引擎-优快云博客

本文介绍了一种简单的模板引擎实现方式，适用于快速展示列表数据及事件绑定。通过使用JavaScript和jQuery，该引擎能够克隆模板并填充数据，同时支持事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的模板引擎–2016.04.18

在项目里经常有遇到列表展示或者一个模板迭代，以前习惯用jstl标签解决这个问题，现在习惯了javascript,基本都不用jstl标签了，网上有很多模板引擎，功能比较强大，但目前开发只需要一个简单的模板迭代器，然后看老大写个js主键，觉得比较好，自己也模仿写了一个，写这么个简单的，主要功能是模板的克隆以及绑定事件，主要设计方法是：定义一个一个div模板，若某个dom节点有事件，就给它自定义一个property属性，给这个property属性绑定事件，这个事件也是一个参数

repository地址

javascript引擎

function initModalEngine(option) {
        if ($.type(option) != "object") {
            alert('parameter must be json map!');
            return false;
        }
        var container = option['container']; //存储数据的容器
        var demo = option['demo']           //模板
        var voList = option['voList'];      //  数据
        if (!(container && demo && voList)) {
            return false;
        }

        //
        container.children("._newProductInstance").remove();
        //
        $.each(voList, function(index, item) {
            var productVo = item;
            var _newProductInstance = demo.clone(false);
            _newProductInstance.removeAttr("id");
            $.each(_newProductInstance.find("*"), function(index1, item) {
                var _fieldName = $(item).attr("name");
                var val = productVo[_fieldName];

                /**渲染事件 bigin**/

                /**渲染事件 end**/
                if (val!=""&&val!=undefined) {
                    $(item).html(val);
                }


                var _url = $(item).attr("url_to_src");
                if (productVo[_url]) {
                    $(item).attr('src',productVo[_url]);
                }
                //绑定事件
                var _property = $(item).attr("property");
                var eventDefineOfitem = option[_property];
                if (eventDefineOfitem) {
                    $(item).bind(eventDefineOfitem.e, function(){
                        eventDefineOfitem.f(productVo,_newProductInstance,$(item));
                    });
                }
            });
            _newProductInstance.show();
            //给数据加上同一样式
            _newProductInstance.addClass("_newProductInstance");
            container.append(_newProductInstance);
        });
    }

使用方法

*html模板

<div id="list_div" class="row"> <!--容器-->
    <div class="row" id="demo_div" style="display: none"><!--模板-->
        <div class="col-md-2" name="id">id</div>
        <div class="col-md-2" name="name">name</div>
        <div class="col-md-2" name="email">email</div>
        <div class="col-md-2 event-div" property="delete">删除</div>
        <div class="col-md-2 event-div" property="edit">编辑</div>
    </div>
</div>

*传入参数

 var jsonData = [
        {id:1,name:"王一",email:"123@gmail.com"}
        ,{id:2,name:"王二",email:"456@gmail.com"}
        ,{id:3,name:"王三",email:"789@gmail.com"}
        ,{id:4,name:"王四",email:"abc@gmail.com"}
        ,{id:5,name:"王五",email:"def@gmail.com"}
        ,{id:6,name:"王六",email:"ghi@gmail.com"}
    ]
    var option = {
        container :$("#list_div"),
        voList : jsonData,
        demo :$("#demo_div"),
        delete: {
            e : 'click',
            f : function (vo,d,item) {
                jsonData.splice((parseInt(vo.id)-1),1);
                simpleModalEngine.initModalEngine(option);
            }
        },
        edit:{
            e:"click",
            f:function(vo,d,item){
                alert(vo.id);
            }
        }
    }
    simpleModalEngine.initModalEngine(option);