Epii.js 简约而不简单的 JavaScript 模板引擎
- 自然数e,圆周率π,虚数单位i,三者合在一起组成epii。
1. 下载 epii.min.js, 并在网页中引用
- <script src="path/to/epii.min.js">
- </script>
2. 编写一个最简单模板
- <body>
- <div id="content">
- <span r-data='{hi}' style='font-size:{font}'>
- </span>
- </div>
- </body>
3. 使用 epii(dom) 方法初始化 epii 对象
- var myepii = epii(document.getElementById("content")) //初始化epii对象,需要指定dom节点 可以是 document.body
4. 数据与模板绑定
- var myepii = epii(document.getElementById("content")); //初始化epii对象,需要指定dom节点 可以是 document.body
- myepii.setData({
- hi: "hello epii.js",
- font: "50px"
- });
- setTimeout(function() {
- myepii.setData({
- font: "100px"
- });
- },
- 3000); //3秒后数据变动,ui自动变动
点击查看效果 demo1.html
标签将用于赋予 value 属性值。
- <input>
标签将用于赋予 src 属性值。
- <img>
将用于赋予 innerHTML 属性值。
- <div> <span> <p> 等其它标签
和
- r-data="title"
的区别是,在
- r-data="{title}"
值不存在时,第一种情况 将显示 title 字符串,第二种情况 显示空,如果第二种情况设置了 r-data-default 则显示其设置的默认值。
- title
- <div id="content">
- <span r-data='您好,我是{name}' style='font-size:{font}'>
- </span>
- <div style="background-color: {bgcolor}">
- 我的Logo是:
- <br>
- <img r-data="logo_img">
- </div>
- <span r-data="{subject}" r-data-default="默认的简介:我叫:{name}">
- </span>
- <p>
- 成立于:
- <input r-data="{time}">
- </p>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- myepii.setData({
- name: "epii.js",
- font: "50px",
- logo_img: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
- bgcolor: "red",
- time: "2017-06-22"
- });
- setTimeout(function() {
- myepii.setData({
- subject: "我的简介是:Epii.js 简约而不简单的JavaScript模板引擎",
- bgcolor: "#999999"
- });
- },
- 3000);
- </script>
点击查看效果 demo2.html
未使用变量空间的写法
- <!-- 不设置空间的写法-->
- <div>
- <p>
- title:
- <span r-data="{info.title}" style="color:{info.title_color}">
- </span>
- </p>
- <p>
- subject:
- <span r-data="{info.subject}">
- </span>
- </p>
- <div>
- 作者信息: name:
- <span r-data="{info.author.name}">
- </span>
- ,sex:
- <span r-data="{info.author.sex}">
- </span>
- </div>
- </div>
- <div>
- <div>
设置空间的写法
- <!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法-->
- <div r-data="{info}" style="background: cadetblue">
- <p>
- title:
- <span r-data="{title}" style="color:{title_color}">
- </span>
- </p>
- <p>
- subject:
- <span r-data="{subject}">
- </span>
- </p>
- <div r-data="author">
- 作者信息: name:
- <span r-data="name">
- </span>
- ,sex:
- <span r-data="{sex}">
- </span>
- </div>
- </div>
全部代码
- <div id="content">
- <!-- 不设置空间的写法-->
- <div>
- <p>
- title:
- <span r-data="{info.title}" style="color:{info.title_color}">
- </span>
- </p>
- <p>
- subject:
- <span r-data="{info.subject}">
- </span>
- </p>
- <div>
- 作者信息: name:
- <span r-data="{info.author.name}">
- </span>
- ,sex:
- <span r-data="{info.author.sex}">
- </span>
- </div>
- </div>
- <!--r-data 设置变量空间 设置空间为 info,在空间内部 info.title 直接写 title就可以 的写法-->
- <div r-data="{info}" style="background: cadetblue">
- <p>
- title:
- <span r-data="{title}" style="color:{title_color}">
- </span>
- </p>
- <p>
- subject:
- <span r-data="{subject}">
- </span>
- </p>
- <div r-data="author">
- 作者信息: name:
- <span r-data="name">
- </span>
- ,sex:
- <span r-data="{sex}">
- </span>
- </div>
- </div>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- myepii.setData({
- info: {
- title: "epii.js 简介",
- title_color: "red",
- subject: "epii.js 简约而不简单的JavaScript模板引擎",
- author: {
- name: "MrRen",
- sex: "男"
- }
- }
- });
- setTimeout(function() {
- myepii.setData({
- info: {
- title: "epii.js 新的简介"
- }
- });
- },
- 3000);
- </script>
点击查看效果 demo3.html
epii.js 提共两种方式设置 dom 节点隐藏和显示。
通过 style 属性来控制。
- style="display: {h1_display}"
标签来设定。
- r-display
,必须为 bool 等式字符串 ,推荐使用这种方式
- r-display="{img_show}-1==0"
- <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节点 可以是 body
- myepii.setData({
- title: "我是标题",
- h1_display: "block",
- img_url: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
- img_show: 1
- });
- setTimeout(function() { //两种方法隐藏
- myepii.setData({
- h1_display: "none",
- img_show: 0
- });
- },
- 3000);
- </script>
点击查看效果 demo4.html
- onclick="fun('{name}','{age}')"
- onblur="myblur('{name}','{age}')"
和
- r-click-change
两个标签来处理 点击跳转 和点击执行函数事件(这两种事件占比最高)。
- r-click-function
标签设置点击跳转链接。 如
- r-click-change
- r-click-change='http://www.baidu.com?name={name}'
标签设置点击执行函数。 如
- r-click-function
, 这种写法和
- r-click-function="on_subject_click#{info.subject}#{title}"
实现效果一样,推荐使用前者。
- onclick="on_subject_click('{info.subject}','{title}')"
- <div id="content">
- <h1 r-data="title" r-click-change="{baidu_link}">
- </h1>
- <br>
- <img r-data="img_url" r-click-function="{imgclick}#{title}#{img_url}">
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- myepii.setData({
- title: "点我跳转到百度",
- baidu_link: "http://www.baidu.com",
- img_url: "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
- imgclick: "myfunction"
- });
- function myfunction(title, img_url) {
- console.log(this.src); //this is dom itself
- console.log(title);
- console.log(img_url);
- }
- </script>
点击查看效果 demo5.html
通过
来自定义
- epii.setClickToChangeFunction(f);
事件, 在
- r-click-change
开发中 一般需要不会直接通过 location 页面跳转,而是需要处理自定义协议。
- native+webapp
- <div id="content">
- <h1 r-data="title" r-click-change="baidu://?a=1&b=2">
- </h1>
- </div>
- <script>
- //自定义r-click-change 处理事件, 在native+webapp开发中 一般需要自定义协议
- epii.setClickToChangeFunction(function(url) {
- console.log(url);
- });
- var myepii = epii(document.getElementById("content"));
- myepii.setData({
- title: "我是 Epii.js"
- });
- </script>
点击查看效果 demo6.html
epii.js 通过自定义标签
来设置此 dom 节点将显示列表, 在列表节点内的 变量 将自切换为 列表某一项数据。
- r-list
支持多级列表展示
- <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"));
- myepii.setData({
- title: "列表展示",
- users: [{
- name: "张三",
- age: "12岁"
- },
- {
- name: "李四",
- age: "14岁"
- }]
- });
- </script>
点击查看效果 demo7.html
如果列表中有多个模板,则根据
来自动选择对应的模板,
- r-display
- <div id="content">
- <h1 r-data="title">
- </h1>
- <div r-list="users">
- <div r-display="{item_type}-1==0" style="background-color: blueviolet">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- <div r-display="{item_type}-2==0" style="background-color: red">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- </div>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- 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>
点击查看效果 demo8.html
- <div id="content">
- <h1 r-data="title">
- </h1>
- <div r-list="users">
- <div r-display="{item_type}-1==0" style="background-color: blueviolet">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- <div r-display="{item_type}-2==0" style="background-color: red">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- </div>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- 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>
点击查看效果 demo9.html
通过
设置当数据为空,或者未设置时候列表的样式 。
- r-empty="1"
- <div id="content">
- <h1 r-data="title">
- </h1>
- <div r-list="users">
- <div r-display="{item_type}-1==0" style="background-color: blueviolet">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- <div r-display="{item_type}-2==0" style="background-color: red">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- <div r-empty="1" style="background-color: cadetblue">
- 没有数据的时候显示
- </div>
- </div>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- myepii.setData({
- title: "列表展示",
- users: []
- });
- setTimeout(function() { 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>
点击查看效果 demo10.html
- getData,getDataValue两个方法
的
- epii.js
方法 可以获取所有设置的数据
- getData
方法 可以快速获取已设置的数据,
- getDataValue
支持多参数,链条
- getDataValue
- key
- myepii.getDataValue("title");
- myepii.getDataValue("info","subject");
- myepii.getDataValue("users",1,"age")
- <div id="content">
- <h1 r-data="title">
- </h1>
- <div r-list="users">
- <div r-display="{item_type}-1==0" style="background-color: blueviolet">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- <div r-display="{item_type}-2==0" style="background-color: red">
- 名称
- <span r-data="name">
- </span>
- ,年龄
- <span r-data="age">
- </span>
- </div>
- </div>
- </div>
- <script>
- var myepii = epii(document.getElementById("content"));
- 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>
点击查看效果 demo11.html
- <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;background-color:{bgcolor};display: {display}">
- </div>
- <div r-data="{map.age}" r-display="{map.show}-1==0">
- </div>
- <img r-data="{img_url}">
- <img src="{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 uiview
- console.log(this.innerHTML);
- console.log(c);
- console.log(b);
- }
- var data = {
- "img_url": "https://raw.githubusercontent.com/epaii/epii.js/master/docs/Epii.js.jpg",
- "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>
点击查看效果 demo12.html
来源: http://www.cnblogs.com/tianliangle/p/7249283.html