Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in die Vorlagen-Engine epii.js

巴扎黑
Freigeben： 2017-07-18 16:58:48
Original
1348 Leute haben es durchsucht

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>
    Nach dem Login kopieren

    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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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);
    });
Nach dem Login kopieren

  • 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: "列表展示",

    });
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

 

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>
Nach dem Login kopieren

 

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>
Nach dem Login kopieren

 

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>
Nach dem Login kopieren

 

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!

Verwandte Etiketten：
javascript
Quelle：php.cn
Vorheriger Artikel：Einführung in die Methode zur Bestimmung, ob eine Variable ein Objekt oder ein Array in JavaScript ist Nächster Artikel：JavaScript-Grundlagen – Objekte und Eigenschaften
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
JavaScript-Hover-Ereignisse für herstellerspezifische Pseudoelemente 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
Aus 2024-04-06 15:35:24
0
1
274
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...
Aus 2024-04-06 12:53:11
0
1
376
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage