首页 > 代码库 > epii.js简约而不简单的JS模板引擎
epii.js简约而不简单的JS模板引擎
1,基础数据绑定
epii 自定义dom节点属性 r-data 可以对任何类型节点赋值，其中 input 节点最终 赋值其value 属性，img节点赋值其 src 属性，其它类型节点均赋值innerHtml 属性。
如果设置r-data-default 则在没有数据时候显示默认值。
r-data="http://www.mamicode.com/title" 和 r-data="http://www.mamicode.com/{title}" 的区别是，在title值不存在时，第一种情况 将显示 title 字符串，第二种情况 显示空，如果第二种情况设置了r-data-default 则显示其设置的默认值
以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo1.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title">
</h1>
<div r-data="http://www.mamicode.com/文章内容：{content}"></div>
<br>
<div r-data="http://www.mamicode.com/{subject}" r-data-default="没有被赋值，只能用：{title}"></div><!-- 默认值-->
<br>
<input r-data="http://www.mamicode.com/inputvalue"><!-- input 负值方法1-->
<input value="http://www.mamicode.com/{inputvalue}"><!-- input 负值方法2-->
<br>
<img r-data="http://www.mamicode.com/img_url" style="width: {img_width}px"><!-- img 负值方法1-->
<!-- 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}
ht t p s : / / e pa i i . g i t hu b . i o / e p i i. j s / d e m o / de m o 2.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" style="width: {h1_width}px;height: {h1_height}px;background-color: {h1_color}">
</h1>
<div r-data="http://www.mamicode.com/{info.subject}"></div>
<br>
<img r-data="http://www.mamicode.com/{img.img_url}" style="width: {img.img_width}px">
</div>
<script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
myepii.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 id="content">
<h1 r-data="http://www.mamicode.com/title" style="display: {h1_display}"> <!--第一种方法，直接在style中 用变量，不推荐-->
</h1>
<br>
<img r-data="http://www.mamicode.com/img_url" r-display="{img_show}-1==0"><!--第二种方法，使用 r-display 标签，推荐-->
</div>
<script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
myepii.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}‘)" 实现效果一样，推荐使用前者
同一节点不可重复使用
以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo9.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" r-click-change="http://www.baidu.com/?q={title}"> </h1>
</h1>
<div r-data="http://www.mamicode.com/{info.subject}" r-click-function="on_subject_click#{info.subject}#{title}"></div>
<br>
<div r-data="http://www.mamicode.com/{info.subject}" onclick="on_subject_click(‘{info.subject}‘,‘{title}‘)"></div>
<br>
<div r-list="users">
<div r-click-function="on_item_click#{name}#{age}">
名称<span r-data="http://www.mamicode.com/name"></span>,
年龄<span r-data="http://www.mamicode.com/age" r-click-change="http://www.baidu.com/?age={age}"></span>
</div>
</div>
</div>
<script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
myepii.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节点 可以是 body
myepii.setData({
title: "列表展示",
});
6 列表（基础）
epii 通过 r-list 标签指定此dom节点将显示列表， 在列表节点内的 变量 将自切换为 列表某一项数据，在列表内之前所有标签,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo4.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" > </h1>
<div r-list="users">
<div>名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
</div>
</div>
<script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
myepii.setData({
title: "列表展示",
users:[
{name:"张三",age:"12岁"},
{name:"李四",age:"14岁"}
]
});</script>
7 列表（多模板）
如果列表中有多个模板，则根据r-display 来自动选择对应的模板,以下代码效果可在此处预览 h t t ps : / / e p ai i . g i t h ub . i o / ep i i . j s /d e m o / de mo5.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></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}
]
});</script>
8 列表（追加数据）
epii 可两种方式对列表追加数据
方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法
方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式
以下代码效果可在此处预览 h t t p s : / /e p a i i . g i th u b . i o / e pi i.js/demo/demo6.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></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" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 h t t p s : / /e p a i i . g i t h ub . i o / e p i i .j s / d e mo / d e m o 7 . ht m l
<div id="content">
<h1 r-data="http://www.mamicode.com/title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
<div r-empty="1" style="没有数据的时候显示</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>
10 数据获取，获取已设置的数据，getData,getDataValue两个方法
通过 epii 的 getData 方法 可以获取所有设置的数据
通过 epii的 getDataValue 方法 可以快速获取已设置的数据，getDataValue 支持多参数，链条key
如 myepii.getDataValue("title"); myepii.getDataValue("info","subject"); myepii.getDataValue("users",1,"age")
以下代码效果可在此处预览 h t t p s : / / e pa i i . g i th u b . i o /e p i i .j s/demo/demo8.html
<div id="content">
<h1 r-data="http://www.mamicode.com/title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="http://www.mamicode.com/name"></span>,年龄<span r-data="http://www.mamicode.com/age"></span></div>
</div>
</div>
<script> var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 body
myepii.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案例源码:(h t t p s: / / g i t h u b. c o m / ep a i i / ep i i . j s/ blob/master/index.html)
demo案例效果:(ht t p s: / / e p a i i. g i t h u b. i o / e p ii . j s / i n de x . h t ml )
<div >
<div r-data="http://www.mamicode.com/我的名字是{name}，性别:{sex}" r-click-function="index#{name}#{sex}">
</div>
<div r-click-change="http://www.baidu.cc/?a={name}">click_to_change</div>
<div r-data="http://www.mamicode.com/show_name" r-display="{isshow}-1==0" style="background-color: green">
</div>
<div r-data="http://www.mamicode.com/{hebei}" r-data-default="默认值{name}" style="width:{width}px;height:{height}px;">{bgcolor};display: {display}" >
</div>
<div r-data="http://www.mamicode.com/{map.age}" r-display="{map.show}-1==0" >
</div>
<img r-data="http://www.mamicode.com/{img_url}" >
<input type="text" r-data="http://www.mamicode.com/{img_url}" >
<input type="text" value="http://www.mamicode.com/{img_url}" >
<div r-list="list" style="background-color: #007bc7">
<span r-data="http://www.mamicode.com/name" r-display="{moban}-1==0"></span>
<span r-data="http://www.mamicode.com/name" style="color: red" r-display="{moban}-2==0" r-click-change="http://www.ddle.cc/?a={age}">
</span>
<div r-display="{moban}-3==0" r-click-function="index#2#{age}">
<div> 二级列表：</div>
<div r-list="wanju">
<span r-data="http://www.mamicode.com/name" r-display="{moban}-1==0"></span>
<span r-data="http://www.mamicode.com/name" style="color: blue" r-display="{moban}-2==0"
r-click-change="http://www.ddle.cc/?a={a}">
</span>
</div>
</div>
<span r-empty="1">
真的没有数据 </span>
</div>
</div>
<script>
epii.setClickToChangeFunction(function (url) {
alert(url);
}); function index(c, b) {//this bind to uiview
console.log(this.innerHTML);
console.log(c);
console.log(b);
} var data = http://www.mamicode.com/{ "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简约而不简单的JS模板引擎
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。