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

epii.js是什么

• epii.js是一个 模板引擎，可快速实现数据与ui绑定，快速实现事件绑定，与处理，不依赖任何第三方库,仅仅8k，在native+webapp开发 和 web开发，h5微网页上均可以使用， 不与其它框架冲突。
• 让开发者更多关注与应用本身，而不用花费大量时间实现数据与ui的，和事件处理。效率大幅度提升。

项目地址

https://github.com/epaii/epii.js

目录

• 1 基础数据绑定
• 2 数据绑定其它语法
• 3 节点的隐藏/显示
• 4 点击事件
• 5 自定义跳转事件
• 6 列表（基础）
• 7 列表（多模板）
• 8 列表（追加数据）
• 9 列表（空数据）
• 10 数据获取，获取已设置的数据，getData,getDataValue两个方法
• 11 完整的demo，几乎涉及所有语法

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

    

    
    

    

     

    

    
    
    

    
    ![]({img_url})

2 数据绑定其它语法

• epii 可以实现dom节点 属性的变量绑定，可以在任意属性中使用变量标签，比如 style ，width，等任意属性,以下代码效果可在此处预览
• 支持 链条式变量，比如 {info.subject}
  https://epaii.github.io/epii.js/demo/demo2.html

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

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}')" 实现效果一样，推荐使用前者
• onclick，r-click-change，r-click-function 同一节点不可重复使用
• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo9.html

    
  
    
    

    

    

    

    

        

            名称,
            年龄
        
    

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

    
  
    

        
名称,年龄
    

7 列表（多模板）

• 如果列表中有多个模板，则根据r-display 来自动选择对应的模板,以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo5.html

    
  
    

        
名称,年龄
        
名称,年龄
    

8 列表（追加数据）

• epii 可两种方式对列表追加数据
• 方法1 ，重新 setData, 将重新显示列表所有数据，如果旧数据有改变，则用这种方法
• 方法2 ， addData ，已有数据不变，追加数据，如果旧数据没有任何改变，推荐使用这种方式
• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo6.html

    
  
    

        
名称,年龄
        
名称,年龄
    

9 列表（空数据）

通过 r-empty="1" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.html

    
  
    

        
名称,年龄
        
名称,年龄
        
没有数据的时候显示
    

10 数据获取，获取已设置的数据，getData,getDataValue两个方法

• 通过 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

    
  
    

        
名称,年龄
        
名称,年龄
    

11 完整的demo，几乎涉及所有语法

demo案例源码:(https://github.com/epaii/epii.js/blob/master/index.html)

demo案例效果:(https://epaii.github.io/epii.js/index.html)

    


    
    
click_to_change
    


    
    


    
    


    
    
    ![]({img_url})
    
    
    


        
        

        
        

            
 二级列表：
            

                
                
                    
            


        
        
            真的没有数据