Einführung in die Vorlagen-Engine epii.js

Was ist epii.js

• epii.js ist eine Vorlagen-Engine, die schnell Daten- und UI-Bindungen implementieren, Ereignisbindungen schnell implementieren und verarbeiten kann. Verlässt sich nicht auf Bibliotheken von Drittanbietern, nur 8 KB, kann in der nativen + Webapp-Entwicklung, Webentwicklung und h5-Mikrowebseiten verwendet werden und steht nicht in Konflikt mit anderen Frameworks.

• Ermöglichen Sie Entwicklern, sich mehr auf die Anwendung selbst zu konzentrieren, anstatt viel Zeit mit der Implementierung von Daten und Benutzeroberflächen sowie der Ereignisverarbeitung zu verbringen. Die Effizienz wird erheblich verbessert.

Projektadresse

1, grundlegende Datenbindung

• epii Das benutzerdefinierte Dom-Knotenattribut „r-data“ kann jedem Knotentyp zugewiesen werden. Dem Eingabeknoten wird sein Wertattribut zugewiesen, dem IMG-Knoten wird sein src-Attribut zugewiesen, und anderen Knotentypen wird das innerHtml-Attribut zugewiesen.

• Wenn r-data-default eingestellt ist, wird der Standardwert angezeigt, wenn keine Daten vorhanden sind.

• Der Unterschied zwischen r-data="title" und r-data="{title}" besteht darin, dass die Titelzeichenfolge im angezeigt wird, wenn der Titelwert nicht vorhanden ist Im ersten Fall wird im zweiten Fall „leer“ angezeigt. Wenn im zweiten Fall „r-data-default“ festgelegt ist, wird der Standardwert seiner Einstellung angezeigt.

• Die Auswirkung des Folgenden Der Code kann hier in der Vorschau angezeigt werden: 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 Andere Syntax für Daten Bindung

• epii kann eine variable Bindung von Dom-Knotenattributen realisieren, und Sie können variable Tags in beliebigen Attributen wie Stil, Breite und anderen Attributen verwenden Hier kann eine Vorschau angezeigt werden

• Unterstützt Kettenvariablen wie {info.subject}
  https://epaii.github.io/epii.js/demo/demo2.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节点 可以是 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 Knoten ausblenden/anzeigen

• epii bietet zwei Möglichkeiten, das Ausblenden festzulegen und Anzeige von Dom-Knoten

• Methode 1, style="display: {h1_display}" Bindung über Style-Attribut

• Methode 2, über r -display tag r-display="{img_show} -1==0", muss eine Bool-Gleichungszeichenfolge sein, es wird empfohlen, diese Methode zu verwenden

• Die Wirkung des folgenden Codes kann hier in der Vorschau angesehen werden: 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节点 可以是 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 Klickereignis

• epii implementiert Klickereignisse über zwei Tags, r-click-change und r-click-function. Der Tag-Inhalt kann variable Symbole verwenden -change-Tag realisiert benutzerdefinierte Klicksprünge und das r-click-function-Tag implementiert durch Klick ausgelöste benutzerdefinierte Funktionen

• r-click-change="http://www.baidu. com/?1={title}“, um beim Klicken direkt zu springen

• r-click-function="on_subject_click#{info.subject}#{title}" und onclick="on_subject_click ('{info.subject}','{title}')" Implementierung Der Effekt ist der gleiche, es wird empfohlen, ersteres zu verwenden

• onclick, r-click-change, r-click-function. Derselbe Knoten kann nicht wiederverwendet werden

• Der folgende Code Der Effekt kann hier in der Vorschau angezeigt werden: 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(&#39;{info.subject}&#39;,&#39;{title}&#39;)"></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节点 可以是 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 Passen Sie das Sprungereignis an

• Verwenden Sie epii.setClickToChangeFunction (f); Um das R-Click-Change-Ereignis anzupassen, ist es bei der nativen+Webapp-Entwicklung im Allgemeinen nicht erforderlich, die Positionsseitensprünge direkt zu übergeben, sondern es müssen benutzerdefinierte Protokolle verarbeitet werden.

epii.setClickToChangeFunction(function (url) {
        console.log(url);
    });

• Die folgenden Codeeffekte können hier in der Vorschau angezeigt werden: 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节点 可以是 bodymyepii.setData({
        title: "列表展示",

    });

6 Liste (Grundlagen)

• epii Durch Angabe dieses Dom-Knotens über das r-list-Tag werden die Variablen im Listenknoten automatisch zu einem bestimmten Datenelement in der Liste gewechselt Der Code kann hier in der Vorschau angezeigt werden: 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节点 可以是 bodymyepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁"},
            {name:"李四",age:"14岁"}
        ]
    });</script>

7 Liste (mehrere Vorlagen)

• Wenn die Liste mehrere Vorlagen enthält, wird die entsprechende Vorlage automatisch entsprechend der R-Anzeige ausgewählt. Der Effekt des folgenden Codes kann in der Vorschau angezeigt werden hier https://epaii.github.io /epii.js/demo/demo5.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节点 可以是 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 Liste ( Daten anhängen)

• epii kann Daten auf zwei Arten an die Liste anhängen

• Methode 1, re-setData zeigt alle Daten erneut an in der Liste. Wenn sich die alten Daten geändert haben, verwenden Sie diese Methode

• Methode 2, addData, vorhandene Daten bleiben unverändert, Daten anhängen, wenn sich an den alten Daten keine Änderung ergibt Es wird empfohlen, diese Methode zu verwenden

• Die folgenden Codeeffekte können hier in der Vorschau angezeigt werden: https://epaii.github.io/epii.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" 设置当数据为空，或者未设置时候列表的样式，以下代码效果可在此处预览 https://epaii.github.io/epii.js/demo/demo7.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 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")

• 以下代码效果可在此处预览 https://epaii.github.io/epii.js/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节点 可以是 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 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 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>

 

Das obige ist der detaillierte Inhalt vonEinführung in die Vorlagen-Engine epii.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!