What is epii.js

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.

Project address

1, basic data binding

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>
  <h1>
  </h1>
  <div></div>
  <br>
   <div></div>
<!-- 默认值-->
  <br>
  <input><!-- input 负值方法1-->
  <input><!-- input 负值方法2-->
  <br>
  <img  alt="Introduction to epii.js template engine" ><!-- 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 Other syntax for data binding

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>
    <h1>
    </h1>
    <div></div>
    <br>
    <img  alt="Introduction to epii.js template engine" >

</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>

3 Node hiding/showing

epii There are two ways to set the hiding and display of dom nodes
Method 1, style="display: {h1_display}" Bind through the style attribute
Method 2, through the r-display tag r-display="{img_show}-1== 0", must be a bool equation string, it is recommended to use this method
The effect of the following code can be previewed here https://epaii.github.io/epii.js/ demo/demo3.html

<div>
    <h1> <!--第一种方法，直接在style中 用变量，不推荐-->
    </h1>
    <br>
    <img  alt="Introduction to epii.js template engine" ><!--第二种方法，使用 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>

4 Click event

<div>
    <h1 id="">  </h1>
    
    <div></div>
    <br>
    <div></div>
    <br>
    <div>
        <div>名称<span></span>,
            年龄<span></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>
    <h1 id="">  </h1>
    <div>
        <div>名称<span></span>,年龄<span></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>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></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>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></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" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.html

<div>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></span>
</div>
        <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>
</div><p> </p><h1 id="数据获取-获取已设置的数据-getData-getDataValue两个方法">10 数据获取，获取已设置的数据，getData,getDataValue两个方法</h1>

通过 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>
    <h1 id="">  </h1>
    <div>
        <div>,年龄<span></span>
</div>
        <div>,年龄<span></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>

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

demo案例源码:()

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

<div>
    <div>

    </div>
    <div>click_to_change</div>
    <div>

    </div>
    <div>{bgcolor};display: {display}" >

    </div>
    <div>

    </div>
    <img  alt="Introduction to epii.js template engine" >
    ![]({img_url})
    <input>
    <input>
    <div>

        <span></span>
        <span></span>
        <div>
            <div> 二级列表：</div>
            <div>
                <span></span>
                <span>
                    </span>
            </div>


        </div>
        <span>真的没有数据</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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn