开发者社区> 技术小甜> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

epii.js简约而不简单的JS模板引擎

简介:
+关注继续查看

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 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_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}
    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="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节点 可以是 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="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://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="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节点 可以是 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="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节点 可以是 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="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}
       ]
   });</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="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>

复制代码

 

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="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>

复制代码

 

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="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: "获取数据",
       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="我的名字是{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}"    >
   ![]({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://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>

复制代码


















本文转自xsster51CTO博客,原文链接: http://blog.51cto.com/12945177/1948467,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java连接数据库警告WARN: Establishing SSL connection without server's identity ......
今天搭了个框架,发现数据库发出了警告 Fri Mar 23 13:49:33 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended.
3624 0
网站Web项目树形菜单的实现过程(ExtJS+SpringMVC+Spring+Hibernate+MySQL)
常见的OA或者bbs或者网站,左侧往往带有菜单,使用者就可以通过菜单项进入响应的功能模块或者板块或者专区,如下所示:PKU的BBS明显使用了ExtJS的海王星主题,而且使用的就是普通的tabPanel组件实现的菜单。
2386 0
《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助。 组件的基础知识.png        2     AbstractContainer(派生37个).
735 0
ETL数据导入/导出工具 HData(支持JDBC、Hive、HDFS、HBase、Kafka等)
HData是一个异构的ETL数据导入/导出工具,致力于使用一个工具解决不同数据源(JDBC、Hive、HDFS、HBase、MongoDB、FTP、Http、CSV、Excel、Kafka等)之间数据交换的问题。
1831 0
AOL/J JDBC连接在EBS中的实现
参考文档:AOL/J JDBC Connection Pool White Paper (文档 ID 278868.1) The JDBC Pool in e-Business Suite is implemented through the core java...
913 0
在Spring Beans中的JSF
在Spring Beans中的JSF http://blog.rainer.eschen.name/2007/08/21/jsf-on-spring-beans/ 以前,我写过在混合依赖注入环境中怎样使用backing beans。
720 0
js模板引擎,哪个好
js模板引擎模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。js模板引擎包括如下:template官方参考:http://aui.
764 0
改变extjs的window在modal下,背景由半透明变为全透明
在ext\resources\css目录下,编辑ext-all.css文件,文件首部:html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin...
659 0
+关注
10136
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载