epii.js模板引擎介紹

epii.js是什么

• epii.js是一个 模板引擎，可快速实现数据与ui绑定，快速实现事件绑定，与处理，不依赖任何第三方库,仅仅8k，在native+webapp开发 和 web开发，h5微网页上均可以使用， 不与其它框架冲突。

• 让开发者更多关注与应用本身，而不用花费大量时间实现数据与ui的，和事件处理。效率大幅度提升。

项目地址

1,基础数据绑定

• epii 自定义dom节点属性 r-data 可以对任何类型节点赋值，其中 input 节点最终 赋值其value 属性，img节点赋值其 src 属性，其它类型节点均赋值innerHtml 属性。

• 如果设置r-data-default 则在没有数据时候显示默认值。

• r-data="title" 和 r-data="{title}" 的区别是，在title值不存在时，第一种情况 将显示 title 字符串，第二种情况 显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo1.html

  <div>
    <h1>
    </h1>
    <div></div>
    <br>
     <div></div>
  <!-- 默认值-->
    <br>
    <input><!-- input 负值方法1-->
    <input><!-- input 负值方法2-->
    <br>
    <img  alt="epii.js模板引擎介紹" ><!-- img 负值方法1-->
    ![]({img_url})<!-- img 负值方法2  ,但这种存在缺点，因为在解析前，已经加载一次不存在的图片，多一次请求，不推荐-->
  </div>
  <script>  var myepii = epii(document.getElementById("content"));//初始化殷勤，需要制定dom节点 可以是 body
    myepii.setData({
        title: "我是标题",
        content: "我是内容主题",
        inputvalue: "input内容",
        img_url:"https://www.baidu.com/img/bd_logo1.png",
        img_width:100
    });
  
    setTimeout(function () {
        myepii.setData({
            title: "我是新的标题",
            content: "我是新的内容主题"  });
    }, 3000);</script>

   

  2 数据绑定其它语法

• epii 可以实现dom节点 属性的变量绑定，可以在任意属性中使用变量标签，比如 style ，width，等任意属性,以下代码效果可在此处预览

• 支持 链条式变量，比如 {info.subject}
  https://epaii.github.io/epii.js/demo/demo2.html

<div>
    <h1>
    </h1>
    <div></div>
    <br>
    <img  alt="epii.js模板引擎介紹" >

</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        h1_width:100,
        h1_height:100,
        h1_color:"red",
        title: "我是标题",
        info:{subject:"文章简介"},
        img:{
            img_url: "https://www.baidu.com/img/bd_logo1.png",
            img_width: 100}
    });

    setTimeout(function () {
        myepii.setData({
            title: "我是新的标题",
            h1_width:300,
            h1_height:300,
            h1_color:"blue",
            img:{  img_width:300}
        });
    }, 3000);</script>

 

3 节点的隐藏/显示

• epii 提共两种方式设置dom节点隐藏和显示

• 方法1 ，style="display: {h1_display}" 通过style 属性绑定

• 方法2 ， 通过 r-display 标签 r-display="{img_show}-1==0"，必须为bool 等式字符串 ，推荐使用这种方式

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo3.html

<div>
    <h1> <!--第一种方法，直接在style中 用变量，不推荐-->
    </h1>
    <br>
    <img  alt="epii.js模板引擎介紹" ><!--第二种方法，使用 r-display 标签，推荐-->

</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "我是标题",
        h1_display:"block",

        img_url:"https://www.baidu.com/img/bd_logo1.png",
        img_show:1});

    setTimeout(function () {//两种方法隐藏        myepii.setData({
            h1_display:"none",
            img_show:0});
    }, 3000);</script>

 

4 点击事件

• epii 通过 r-click-change 和 r-click-function 两个标签，实现点击事件，标签内容均可以使用变量符号，其中 r-click-change 标签实现点击自定义跳转， r-click-function标签实现点击触发自定义函数

• r-click-change="http://www.baidu.com/?1={title}" 点击时候 直接跳转

• r-click-function="on_subject_click#{info.subject}#{title}" 和 onclick="on_subject_click('{info.subject}','{title}')" 实现效果一样，推荐使用前者

• onclick，r-click-change，r-click-function 同一节点不可重复使用

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo9.html

<div>
    <h1 id="">  </h1>
    
    <div></div>
    <br>
    <div></div>
    <br>
    <div>
        <div>名称<span></span>,
            年龄<span></span>
        </div>
    </div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "列表展示",
        info:{subject:"文章简介"},
        users:[
            {name:"张三",age:"12岁"},
            {name:"李四",age:"14岁"}
        ]
    });function on_subject_click(subject,title) {
        console.log(subject,title);

    }function on_item_click(name,age) {
        console.log(name,age);
    }</script>

 

5 自定义跳转事件

• 通过 epii.setClickToChangeFunction(f); 来自定义 r-click-change 事件， 在native+webapp开发中 一般需要不会直接通过location 页面跳转，而是需要处理自定义协议。

epii.setClickToChangeFunction(function (url) {
        console.log(url);
    });

 

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo10.html

 //自定义r-click-change 处理事件， 在native+webapp开发中 一般需要自定义协议epii.setClickToChangeFunction(function (url) {
        console.log(url);
    });var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "列表展示",

    });

 

6 列表（基础）

• epii 通过 r-list 标签指定此dom节点将显示列表， 在列表节点内的 变量 将自切换为 列表某一项数据，在列表内之前所有标签,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo4.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>名称<span></span>,年龄<span></span>
</div>
    </div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁"},
            {name:"李四",age:"14岁"}
        ]
    });</script>

 

7 列表（多模板）

• 如果列表中有多个模板，则根据r-display 来自动选择对应的模板,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo5.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></span>
</div>
    </div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁",item_type:1},
            {name:"李四",age:"14岁",item_type:2},
            {name:"张三1",age:"121岁",item_type:1},
            {name:"李四1",age:"141岁",item_type:2}
        ]
    });</script>

 

8 列表（追加数据）

• epii 可两种方式对列表追加数据

• 方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法

• 方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo6.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></span>
</div>
    </div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body    myepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁",item_type:1},
            {name:"李四",age:"14岁",item_type:2},
            {name:"张三1",age:"121岁",item_type:1},
            {name:"李四1",age:"141岁",item_type:2}
        ]
    });
    setTimeout(function () {//3秒后追加列表myepii.addData({ //追加已有数据，列表将被追加，其它类型直接覆盖title: "追加列表展示",
            users:[
                {name:"张三5",age:"12岁",item_type:1},
                {name:"李四6",age:"14岁",item_type:2},
                {name:"张三7",age:"121岁",item_type:1},
                {name:"李四8",age:"141岁",item_type:2}
            ]
        });

    },3000);</script>

 

9 列表（空数据）

通过 r-empty="1" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></span>
</div>
        <div>
    </div>
</div>
<script>
    var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
    myepii.setData({
        title: "列表展示",
        users:[]
    });
    setTimeout(function () {//3秒后追加列表
        myepii.addData({ //追加已有数据，列表将别被加，其它类型直接覆盖
            title: "追加列表展示",
            users:[
                {name:"张三5",age:"12岁",item_type:1},
                {name:"李四6",age:"14岁",item_type:2},
                {name:"张三7",age:"121岁",item_type:1},
                {name:"李四8",age:"141岁",item_type:2}
            ]
        });

    },3000);

</script>
</div><p> </p><h1 id="数据获取-获取已设置的数据-getData-getDataValue两个方法">10 数据获取，获取已设置的数据，getData,getDataValue两个方法</h1>

• 通过 epii 的 getData 方法 可以获取所有设置的数据

• 通过 epii的 getDataValue 方法 可以快速获取已设置的数据，getDataValue 支持多参数，链条key

• 如 myepii.getDataValue("title"); myepii.getDataValue("info","subject"); myepii.getDataValue("users",1,"age")

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo8.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></span>
</div>
    </div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
        title: "获取数据",
        info:{subject:"标题"},
        users:[
            {name:"张三",age:"12岁",item_type:1},
            {name:"李四",age:"14岁",item_type:2},
            {name:"张三1",age:"121岁",item_type:1},
            {name:"李四1",age:"141岁",item_type:2}
        ]
    });
    console.log(myepii.getData());
    alert(myepii.getDataValue("title"));
    alert(myepii.getDataValue("info","subject"));
    alert(myepii.getDataValue("users",1,"age"));</script>

 

11 完整的demo，几乎涉及所有语法

demo案例源码:()

demo案例效果:(https://epaii.github.io/epii.js/index.html)

<div>
    <div>

    </div>
    <div>click_to_change</div>
    <div>

    </div>
    <div>{bgcolor};display: {display}" >

    </div>
    <div>

    </div>
    <img  alt="epii.js模板引擎介紹" >
    ![]({img_url})
    <input>
    <input>
    <div>

        <span></span>
        <span></span>
        <div>
            <div> 二级列表：</div>
            <div>
                <span></span>
                <span>
                    </span>
            </div>


        </div>
        <span>真的没有数据</span>

    </div>
</div>
<script>epii.setClickToChangeFunction(function (url) {
        alert(url);
    });function index(c, b) {//this  bind to uiviewconsole.log(this.innerHTML);
        console.log(c);
        console.log(b);
    }var data = {"img_url":"https://www.baidu.com/img/bd_logo1.png","display":"block","width":100,"height":200,"bgcolor":"red","name": "张三","sex": "男","isshow": 1,"show_name": "show/hide","map":{"show":"1","age":"map_age"},         "list": [{"name": "list_item_1", "moban": 1}, {"name": "list_item_2", "moban": 2, "age": 2}]
    };var myepii = epii(document.body);

    myepii.setData(data);//模拟数据变化setTimeout(function () {
        myepii.setData({//改变已有数据"hebei":"河北邯郸","name": "李四","sex": "女","map":{"show":"0","age":"map_age1"},"bgcolor":"blue","width":500,"height":50,
            isshow: 0});
        setTimeout(function () {
            myepii.addData({//追加已有数据，列表将被追加，其它类型直接覆盖"hebei":"河北石家庄",                 "display":"none","list": [
                    {"name": "list_item_3", "moban": 1},
                    {"name": "list_item_4", "moban": 2, "age": 4},
                    {"moban": 3,"age": 10,"wanju": [{"name": "list_item_list1", "moban": 1}, {"name": "list_item_list2", "moban": 2, a: 5}]
                    }]
            });
            console.log(myepii.getDataValue("name"));
            console.log(myepii.getDataValue("list",1,"age"));
            console.log(myepii.getDataValue("list",4,"wanju",1,"name"));
        },3000);




    }, 3000);</script>

 

以上是epii.js模板引擎介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！