- epii.js 是一个 模板引擎,可快速实现数据与 ui 绑定,快速实现事件绑定,与处理,不依赖任何第三方库, 仅仅 8k,在 native+webapp 开发 和 web 开发,h5 微网页上均可以使用, 不与其它框架冲突。
- 让开发者更多关注与应用本身,而不用花费大量时间实现数据与 ui 的,和事件处理。效率大幅度提升。
https://github.com/epaii/epii.js
- default = "没有被赋值,只能用:{title}" >
- ![]({
- img_url
- })
- 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);
- 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);
- 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);
- function = "on_subject_click#{info.subject}#{title}" >
- function = "on_item_click#{name}#{age}" > 名称,
- 年龄
- 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);
- }
- 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节点 可以是 body
- myepii.setData({
- title: "列表展示",
- });
- 名称,
- 年龄
- var myepii = epii(document.getElementById("content")); //初始化引擎,需要制定dom节点 可以是 body
- myepii.setData({
- title: "列表展示",
- users: [{
- name: "张三",
- age: "12岁"
- },
- {
- name: "李四",
- age: "14岁"
- }]
- });
- ,
- 年龄 > </span></div > <div r - display = "{item_type}-2==0"style = "名称,年龄
- 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}
- ]
- });
- "
- ,
- 年龄 > </span></div > <div r - display = "{item_type}-2==0"style = "名称,年龄
- 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);
- "
通过 r-empty="1" 设置当数据为空,或者未设置时候列表的样式,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.html
- ,
- 年龄 > </span></div > <div r - display = "{item_type}-2==0"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>"
- ,
- 年龄 > </span></div > <div r - display = "{item_type}-2==0"style = "名称,年龄
- 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 "));
- "
- function = "index#{name}#{sex}" >
- click_to_change
- 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
- }
- " >
- ![]({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}">
- function = "index#2#{age}" >
- 二级列表:
- r - click - change = "http://www.ddle.cc/?a={a}" >
- 真的没有数据
- 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 = {
- "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);
来源: http://www.cnblogs.com/tianliangle/p/7193849.html