epii.js is a template engine that can quickly bind data to UI, quickly bind events, and Processing, does not rely on any third-party libraries, only 8k, can be used in native+webapp development, web development, h5 micro web pages, and does not conflict with other frameworks.
Let developers focus more on the application itself, instead of spending a lot of time implementing data and UI, and event processing. Efficiency is greatly improved.
epii The custom dom node attribute r-data can be assigned to any type of node. The input node is assigned its value attribute, the img node is assigned its src attribute, and other types of nodes are assigned the innerHtml attribute.
If r-data-default is set, the default value will be displayed when there is no data.
The difference between r-data="title" and r-data="{title}" is that when the title value does not exist, the title string will be displayed in the first case. In the second case, it displays empty. If r-data-default is set in the second case, the default value of its setting is displayed
The effect of the following code can be previewed here https:// epaii.github.io/epii.js/demo/demo1.html
<div id="content">
<h1 r-data="title">
</h1>
<div r-data="文章内容：{content}"></div>
<br>
<div r-data="{subject}" r-data-default="没有被赋值，只能用：{title}"></div><!-- 默认值-->
<br>
<input r-data="inputvalue"><!-- input 负值方法1-->
<input value="{inputvalue}"><!-- input 负值方法2-->
<br>
<img r-data="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>
epii can realize variable binding of dom node attributes, and variable tags can be used in any attributes, such as style, width, and other attributes. The effect of the following code can be previewed here
Support chain variables, such as {info.subject}
https://epaii.github.io/epii.js/demo/demo2.html
<div id="content">
<h1 r-data="title" style="width: {h1_width}px;height: {h1_height}px;background-color: {h1_color}">
</h1>
<div r-data="{info.subject}"></div>
<br>
<img r-data="{img.img_url}" style="width: {img.img_width}px">
</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><div id="content">
<h1 r-data="title" style="display: {h1_display}"> <!--第一种方法，直接在style中 用变量，不推荐-->
</h1>
<br>
<img r-data="img_url" r-display="{img_show}-1==0"><!--第二种方法，使用 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><div id="content">
<h1 r-data="title" r-click-change="http://www.baidu.com/?q={title}"> </h1>
</h1>
<div r-data="{info.subject}" r-click-function="on_subject_click#{info.subject}#{title}"></div>
<br>
<div r-data="{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="name"></span>,
年龄<span r-data="age" r-click-change="http://www.baidu.com/?age={age}"></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 Custom jump event
epii.setClickToChangeFunction(function (url) {
console.log(url);
}); //自定义r-click-change 处理事件， 在native+webapp开发中 一般需要自定义协议epii.setClickToChangeFunction(function (url) {
console.log(url);
});var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
title: "列表展示",
});6 List (Basic)
<div id="content">
<h1 r-data="title" > </h1>
<div r-list="users">
<div>名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
</div>
</div>
<script>var myepii = epii(document.getElementById("content"));//初始化引擎，需要制定dom节点 可以是 bodymyepii.setData({
title: "列表展示",
users:[
{name:"张三",age:"12岁"},
{name:"李四",age:"14岁"}
]
});</script>7 List (multiple templates)
<div id="content">
<h1 r-data="title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></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 List (append data)
<div id="content">
<h1 r-data="title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="name"></span>,年龄<span r-data="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>
通过 r-empty="1" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.html
<div id="content">
<h1 r-data="title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="name"></span>,年龄<span r-data="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>
通过 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 id="content">
<h1 r-data="title" > </h1>
<div r-list="users">
<div r-display="{item_type}-1==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></span></div>
<div r-display="{item_type}-2==0" style="名称<span r-data="name"></span>,年龄<span r-data="age"></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>
<div >
<div r-data="我的名字是{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="show_name" r-display="{isshow}-1==0" style="background-color: green">
</div>
<div r-data="{hebei}" r-data-default="默认值{name}" style="width:{width}px;height:{height}px;">{bgcolor};display: {display}" >
</div>
<div r-data="{map.age}" r-display="{map.show}-1==0" >
</div>
<img r-data="{img_url}" >
<input type="text" r-data="{img_url}" >
<input type="text" value="{img_url}" >
<div r-list="list" style="background-color: #007bc7">
<span r-data="name" r-display="{moban}-1==0"></span>
<span r-data="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="name" r-display="{moban}-1==0"></span>
<span r-data="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 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>
The above is the detailed content of Introduction to epii.js template engine. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
