epii.js テンプレート エンジンの概要
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 负值方法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('{info.subject}','{title}')"></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}" >
<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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7478
15
1377
52
77
11
19
33
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
WebSocketとJavaScriptを使ったオンライン予約システムの実装方法
Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築
Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
JavaScriptでinsertBeforeを使用する方法
Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
