HTMLテンプレートエンジン

サポート機能

ページ埋め込みノードに従ってテンプレート

とする.

埋め込みコードファイルに従ってテンプレート

とする.

ファイルからテンプレート

をロードする.

includeラベルのサポート(ページネスト)

ダウンロード
テンプレートのダウンロード先:https://github.com/vervet/dee.template
インストール

  npm install dee-template

使用法1.テンプレートとしてページに埋め込まれたノードに基づいて
テンプレートコード(現在のコードページにテンプレートを配置)

<TEXTAREA id='tpl_1' style='display:none'>
     :<span>${date}span>
     :<span>${name}span>
     :<img src='${body.photo}'>
     :<span>${body.weight}span>
     :<span>${body.length}span>

TEXTAREA>

<div id='babyInformation'>
div>

使用法

  require("dee-template");
  var data ={
      date:'2017-06-02',
      name:'Allen,Ding',
      body:{
         'weight':3.45,
         'length':50,
      }
  }
  var node = Template.makeNode('#tpl_1', data);
  $('#babyInformation').append(node);

  //  
  Template.makeNodeTo('#tpl_1',data,'#babyInformation');

使い方2.テンプレートとして埋め込みコードファイルに基づいて
ホームフェースコード:

<object id='obj_1' data='include.inc.html'
type='text/plain' style='disply:none'>object>

テンプレートファイルinclude.inc.htmlコード:

<TEXTAREA id='tpl_1'>
     :<span>${date}span>
     :<span>${name}span>
     :<img src='${body.photo}'>
     :<span>${body.weight}span>
     :<span>${body.length}span>
    for(var i =0; i < 5; i++)
        {
    %>
        ${i} is  
     
TEXTAREA>
<TEXTAREA id='tpl_2'>
.....
TEXTAREA>

使用方法:

 require("dee-template");
  var data ={
      date:'2017-06-02',
      name:'Allen,Ding',
      body:{
         'weight':3.45,
         'length':50,
      }
  }
  var maker = Template.fromEmbededObject('#obj_1');
  var html = maker.template('#tpl_1', data);

使い方3.ファイルからテンプレートをロード(node)
(FSコンポーネント依存、nodeJs環境のみ)
ホームフェースコード:

テンプレートファイルinclude.inc.htmlコード:

<div id='tpl_1'>
     :<span>${date}span>
     :<span>${name}span>
     :<img src='${body.photo}'>
     :<span>${body.weight}span>
     :<span>${body.length}span>
    for(var i =0; i < 5; i++)
        {
    %>
        ${i} is  
     
div>
<div id='tpl_2'>
...
div>

メインインタフェースjsの使い方:

  require("dee-template");
  var data ={
      date:'2017-06-02',
      name:'Allen,Ding',
      body:{
         'weight':3.45,
         'length':50,
      }
  }
  var maker = Template.fromFile('include.inc.html');
  var html = maker.template('#tpl_1', data);

4.includeタグのサポート(htmlファイル参照)
本手法はHTMLのモジュール化に適しており,本機能は特に大型プロジェクトに適しており,モジュール分割include機能の深さ埋め込みを行う.
メインインタフェースコード、例1

<INCLUDE node='tpl_1' src='include.inc.html' script='hello.js'>INCLUDE>

例2

<INCLUDE module='inc_1' src='include.inc.html'>INCLUDE>
<INCLUDE module='inc_1' node='tpl_1' >INCLUDE>
<INCLUDE module='inc_1' node='tpl_2' data='{a:1,b:2}'>INCLUDE>

テンプレートファイルinclude.inc.htmlコード:

<div id='tpl_1' >
     :<span>${date}span>
     :<span>${name}span>
     :<img src='${body.photo}'>
     :<span>${body.weight}span>
     :<span>${body.length}span>
div>
<div id='tpl_2'>
   ...
div>

メインインタフェースJSコード

4.1 includeラベルのプロパティ
ツールバーの
説明
src
埋め込まれたhtmlコードが存在するファイル名
node
使用するサブテンプレートのid(テンプレートファイル内のノードid)
module
includeテンプレートのインスタンスid
data
テンプレートに入力された値
script
実行するコード(書き込みルールは別途参照)
1つのテンプレートファイルに複数のサブテンプレートノードが使用されている場合は、include機能の例2を参照して、テンプレートファイルをインスタンス化してから、各サブテンプレートをそれぞれ使用することができます.
4.2ループネストのサポート
includeはループネストをサポート
4.3 jsコードの実行をサポートする
scriptはモジュールが実行する必要がある埋め込みコードを指し、ルールの例

class MyModule  {
  constructor($) { 
       this.$=$;
       //  $     ，   HTML     
       var name = $('#username').html(); 
       myOldCode($);
  }
  publicMethod (){
     //     
     //    ，   
  }
} //class
function myOldCode($){
    //all my old code
}
module.exports = MyModule;

4.3.1共通関数の呼び出し

//      
$('include')[0].runtime.publicMethod();
//           

4.3.2カスタムイベントのバインド

//       
$('include')[0].runtime.on('myevent',function(param){
    //.....
})

4.3.3カスタムイベントのトリガー

//       
this.trigger('myevent',123);
//   
this.myevent.trigger(123);
//      
$('include')[0].runtime.trigger('myevent',123);
// 
$('include')[0].runtime.myevent.trigger(123)

data属性適用:
node値のないincludeタグはインスタンス化されず、ノードにnode、data、module、さらにはsrcを設定した後、activeIncludeメソッドを使用してラベルを動的にアクティブ化できます.

<include id='inc_1'> include>

$('#inc_1').attr('src','xxx.inc.html');
$('#inc_1').attr('node','tpl_10');
$('#inc_1').attr('data','{a:100,b:200}');
Template.activeInclude('#inc_1');
//  
Template.activeInclude(
     '#inc_1',
     {node:'', src:'', data:''}
);

4.4イベント製造器Template.EventFactory

Template.EventFactory(obj, event)

//       
Template.EventFactory(mainObj, 'myevent');

//    
mainObj.myevent.trigger(111);

利用者"`js mainObj.myevent(function(param){//パラメータを受信
});