ハンドルバーの使用方法

Webサイトでは、データを更新してDOMツリーを操作することにより、ますますJavaScriptを使用して動的インターフェイスを作成しています。 View / Controllerテンプレートを実装するテンプレートエンジンを使用すると、コードがよりきれいになり、変更が簡単になります。

ハンドルバーを使用する

最初に行うことは、ハンドルバーを接続することです。

<script src="js/handlebars.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HandlebarsはJSONデータからHTMLを生成します。 ブラウザーがHandlebarsパターンを認識するためには、後で参照するために、タイプtext / x-handlebars-templateとIDを割り当てる必要があります 。 名前を受け取ってHTMLを表示するテンプレートを作成するためのマークアップは、次のようになります。

 <ul class="updates"> <script id="template" type="text/x-handlebars-template"> <li> <h2>{{name}}</h2> </li> </script> </ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

名前はJSONから取得され、{{name}}に置き換えられます。 次に、データソースを指定する必要があります。

 var data = { name : 'John Doe' },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTMLに入れたい値'John Doe'を持つ1つのnameプロパティを含む単純なJSONオブジェクトを作成しました。 ただし、最初に、テンプレートコードをコンパイルし、それをHTMLの.updatesクラスに添付して、JSON データオブジェクトをパラメーターとして渡す必要があります。

 var template = Handlebars.compile( $('#template').html() ); $('.updates').append( template(data) );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSON データオブジェクトにプロパティを追加して、タスクを少し複雑にしましょう。

  var data = { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、テンプレートを変更します。

 <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} - In: {{location}} </span> </li>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

素晴らしいですが、JSONオブジェクトに複数のユーザーを追加したい場合はどうでしょうか？

 var data = { updates: [ { name: 'Jane Doe', update: 'Just Made my Breakfaast', from: 'Web', location: 'Canada' }, { name: 'John Doe', update: 'What is going on with the weather?', from: 'Phone', } ]},
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

配列をバイパスするには、HTMLを各式でラップする必要があります。

 {{#each updates}} <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} - In: {{location}} </span> </li> {{/each}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題が1つあります。JohnDoeの場所がないため、空の文字列を表示しないように、if条件を含めることができます。

 {{#each updates}} <li> <h2>{{name}}</h2> <p>{{{update}}}</p> <span> Sent From: {{from}} {{#if location}} - In: {{location}}</span> {{/if}} </span> </li> {{/each}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザーが場所を指定しなかったことを示すこともできます。

 {{#if location}} - In: {{location}}</span> {{else}} - Location not provided by the user</span> {{/if}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

この記事では、ハンドルバーの可能性のほんの一部しか取り上げていません。 ハンドルバーは、データが絶えず変化するアプリケーションに最適なオプションです。 tryhandlebarsjs.comにアクセスすることを強くお勧めします。



この記事は、 ハンドルバーの使用方法の翻訳です。