ハンドルバーと口ひげテンプレートエンジン

ハンドルは、テンプレートでは、新しい構文を習得しなくても使用することができ、最大口ひげテンプレートエンジンは互換性の提供、最大の互換性の口ひげテンプレートエンジンのセマンティックステートメントを提供し、非常に効率的なテンプレートエンジンです。

以下は、基本的なテンプレート式で、

変数は、{}と{}の間handlerbarsです。

<DIV クラス = " エントリ" > 
  <H1> {{タイトル}} </ H1> 
  <DIV クラス = " 本体" > 
    {{本体}}
   </ div> 
</ div>

拡張：使用のハンドルバー

実際には、テンプレート、これはデータプログラミングのための方法前尊敬始まっています。例えば、jqueryのテンプレート

JSONを解析JS Web開発は、通常のものです。非常に面倒。テンプレートを使用してハンドルバーは、限り、あなたは、テンプレートを定義するJSONオブジェクトを提供するよう、ハンドルバーにそれJSONオブジェクトは、あなたのテンプレートを設定することができ、非常に使いやすいです！直接コード以下：

<！DOCTYPE htmlののPUBLIC " - // W3C // DTD HTML 4.01移行// EN "  " http://www.w3.org/TR/html4/loose.dtd " >   
<HTML>   
<HEAD>   
<メタHTTP-当量= " Content-Typeの"コンテンツ= " text / htmlの;のcharset = UTF-8 " >   
<タイトル>ハンドルバーデモ</ TITLE>   
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " HTTPS：//ajax.googleapis。 COM / AJAX / libsに/ jqueryの/ 1.7.1 / jquery.min.js " > </ SCRIPT>   
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS /ハンドル-1.0.0.beta.6.js " >> </スクリプト   
<スクリプトタイプ= " テキスト/ javascriptの" SRC = " JS / myjs.js " > </ SCRIPT>   
<スタイルタイプ= " テキスト/ cssの" > </スタイル>   
</ HEAD>   
<BODY>   
    <H2>シンプルなハンドルバーは、</ H2>デモ   
    <ボタンID = " btn_simple " > </ button>の私をクリックして   
    の<divのid = " my_div " >   
  
    </ div>   
    < H2>ハンドルバーヘルパーデモ</ H2>   
    <ボタンID = " btn_helper " > </ button>の私をクリックしてください   
    の<divのid = "helper_div " >   
  
    </ div>   
    <スクリプトのid = " いくつかのテンプレート"タイプ= " テキスト/ X-ハンドルテンプレート" >   
          <表>   
            <THEAD>   
              <目>ユーザー名</目>   
              <目>本名</目>   
              <TH>メール</番目>   
            </ THEAD>   
            <TBODY>   
              {{ #ifのユーザー}}   
                <TR>   
                  <TD> {{ユーザー名}} </ TD>   
                  <TD> {{firstNameの}}、{{lastNameの}} </ TD>  
                  <TD> {{メール}} </ TD>  
                </ TR>   
              {{ 他}}  
                 <TR>   
                  <TD COLSPAN = " 3 " > NOユーザ！</ TD>   
                </ TR>   
              {{ / なら}}  
             </ TBODY>   
          </ TABLE>   
    </ SCRIPT>   
    <スクリプトID = " ヘルパーテンプレート"タイプ= " テキスト/ X-ハンドルテンプレート" >   
        の<div>   
          <H1>で{{のfullName著者}} </ H1>   
          の<div> {{本体}} </ div>   <H2> {{のfullName著者}} </ H2>で  
  
          <H1>コメント</ H1>   
  
          {{#eachコメント}}  
          
          <DIV> {{本体}} </ H2>   
          {{ / 各}}  
         </ div>   
    </ SCRIPT>   
</ body>   
</ HTML>

$（ドキュメント）.ready（関数（）{   
    Handlebars.registerHelper（' のfullName ' 、関数（人）{  
       戻り person.firstName + "  " + ; person.lastName   
    }）;   
  $（" #btn_simple " ）.click（関数を（）{  
     // $（この）.hide（）;   
    showTemplate（）;   
  }）;   
   $（" #btn_helper " ）.click（関数（）{   
  
    showHowUseHelper（）;   
  }）;   
}）;  
// VARコンテキスト= {タイトル：「私の新しいポスト」、身体は：「これが私の最初の投稿です！」};  
VARpersion = {タイトル：" 私の新しいポスト"、身体は：" これが私の最初の投稿です！" }   
関数showTemplate（）{   
    VARのソース= $（" ＃いくつかのテンプレート" ）の.html（）;  
    VaRのテンプレート= Handlebars.compile（ソース）。  
      VaRのデータ= {ユーザー：[   
          {ユーザー名：" アラン"、firstNameの：" アラン"、lastNameの：" ジョンソン"、電子メール：" [email protected] " }、  " アリソン"、firstNameの：" アリソン"、lastNameの：" ハウス"、電子メール：" [email protected] " }、   
          {ユーザ名：" ライアン"、firstNameの：" ライアン"、lastNameの：" カーソン"、電子メール：" ライアン@ test.com " }   
        ]}。  
      $（" #my_div " ）の.html（テンプレート（データ））;;  
  
    
      著者：{firstNameの：" アラン"、lastNameの：" ジョンソン" }、   
      ボディ：" 私はハンドルを愛する" 、   
      コメント：[{   
        著者：{firstNameの：" イェフダ"、lastNameの：" カッツ" }、   
        ボディ：「あまりにミー！"   
      }]   
    }。  
    VaRの源= $（" ＃ヘルパー・テンプレート" ）の.html（）;  
    VaRのテンプレート= Handlebars.compile（ソース）。  #helper_div " ）の.html（テンプレート（コンテキスト））;;   
      
}

。

ハンドルバーと口ひげテンプレートエンジン

おすすめ