検索

ホームページ >ウェブフロントエンド >jsチュートリアル >epii.js テンプレート エンジンの概要

epii.js テンプレート エンジンの概要

巴扎黑
巴扎黑オリジナル
2017-07-18 16:58:481387ブラウズ

epii.js とは

  • epii.js は、データを UI に迅速にバインドし、イベント バインディングと処理を迅速に実装できるテンプレート エンジンであり、ネイティブでサードパーティのライブラリ (8k のみ) に依存しません。 +Webapp 開発および Web 開発は h5 マイクロ Web ページ上で使用でき、他のフレームワークと競合しません。

  • 開発者は、データや UI、イベント処理の実装に多くの時間を費やすのではなく、アプリケーション自体に集中できるようになります。効率が大幅に向上します。

プロジェクトアドレス


1、基本的なデータバインディング

  • epii カスタムdomノード属性r-dataは任意のタイプのノードに値を割り当てることができ、入力ノードには最終的にそのvalue属性が割り当てられます、img ノードには値が割り当てられ、その src 属性と他のタイプのノードには innerHtml 属性が割り当てられます。

  • r-data-defaultが設定されている場合、データがない場合はデフォルト値が表示されます。

  • r-data="title" と r-data="{title}" の違いは、タイトル値が存在しない場合、前者の場合はタイトル文字列が表示され、後者の場合は空になることです。 2 番目のケースでは、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 ノード属性の変数バインディングを実現でき、スタイル、幅、その他の任意の属性の変数タグを使用できます。次のコードの効果は、ここのプレビューで確認できます

  • は、{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 ノードの非表示/表示

  • epii DOM ノードの非表示と表示を設定するには 2 つの方法があります

  • 方法 1、style="display: {h1_display}" によるバインドstyle 属性

  • メソッド 2、r による - 表示タグ r-display="{img_show}-1==0" はブール式文字列である必要があります。このメソッドの使用をお勧めします

  • 。次のコードは、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 Click events

  • epii は、r-click-change を使用し、 r-click-function クリック イベントとタグ コンテンツを実装する 2 つのタグ 可変シンボルを使用できます。そのうち、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

<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 カスタム ジャンプ イベント

  • throughepii.setClickToChangeFunction(f); カスタマイズ r- ネイティブ + Web アプリ開発では、通常、ロケーション ページを直接ジャンプする必要はありません。カスタムプロトコルを処理します。 

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节点 可以是 bodymyepii.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节点 可以是 bodymyepii.setData({
        title: "列表展示",
        users:[
            {name:"张三",age:"12岁"},
            {name:"李四",age:"14岁"}
        ]
    });</script>

7 リスト (複数のテンプレート)

  • に複数のテンプレートがある場合リストは、r -display に基づいて、対応するテンプレートを自動的に選択します。次のコードの効果は、ここでプレビューできます 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 リスト (データの追加)

  • epii リストにデータを追加するには 2 つの方法があります

  • 方法 1、re-setData は、古いデータがある場合、リスト内のすべてのデータを再表示します。変更された場合は、このメソッドを使用します

  • 方法 2、 addData 、既存のデータは変更されず、データを追加します。古いデータに変更がない場合は、このメソッドを使用することをお勧めします

  • 次の効果コードはここでプレビューできます 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>

 

以上がepii.js テンプレート エンジンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptで変数がオブジェクトか配列かを判断する方法の紹介次の記事：JavaScriptで変数がオブジェクトか配列かを判断する方法の紹介

関連記事

続きを見る