JSONレスポンスのタイプに基づいてHtml DOM要素を表示する方法HandleBars

Question

ハンドルバーテンプレートを使用しています。dom要素を表示/非表示する必要があることに基づいてjsonに「displayType」というプロパティがあります。

いつ私のDOMのコメントを表示する必要があります。したがって、条件が適切に機能していないため、新しいことです。

JSONオブジェクト：レベル3のための

{ 
    "menu": { 
    "level1": [ 
     { 
     "title": "level1 title1", 
     "level2": [ 
      { 
      "title": "level2 title 1", 
      "displayType": "txtimgdesc", 
      "level3": [ 
       { 
       "title": "level3 title 1" 
       } 
      ] 
      }, 
      { 
      "title": "level2 title 2", 
      "displayType": "img", 
      "level3": [ 
       { 
       "title": "level3 title 2" 
       } 
      ] 
      }, 
      { 
      "title": "level2 title 3", 
      "displayType": "textimg", 
      "level3": [ 
       { 
       "title": "level3 title 3" 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
} 

HTML：

<ul class="nav-list list-inline container"> 
    {{#each ./level3}} 
    <li class="list-section"> 
     <a href="#" class=""> 
     <!-- display Image only if the type is txtimgdesc or txtimg or img --> 
     <img class="img-responsive {{showType ../displayType}}" src=""> 
     <!-- display header title only if the type is txtimgdesc -->  
     <span class="{{showType ../displayType}}">Header title</span> 
     <!-- display title only if the type is txtimgdesc or txtimg -->  
     <span class="{{showType ../displayType}}">{{{title}}}</span> 
     </a> 
    </li> 
    {{/each}} 
</ul> 

登録ヘルパー：

Handlebars.registerHelper('showType', function(dType){ 
    var _ckType = (dType) ? dType.toLowerCase(): "", returnType=""; 
    returnType = (_ckType == "img") ? "" : "hidden"; 
    returnType = (_ckType == "txtimgdesc") ? "" : "hidden"; 
    returnType = (_ckType == "txtimg") ? "" : "hidden"; 
    return returnType; 
}); 

Answer 1

私は最善のアプローチは前にそれをあなたのデータを操作することだと思いますテンプレートに到達します。たとえば、各 "level3"配列の各オブジェクトには、showImage,showTitle、およびshowDescriptionのプロパティが追加されています。このように、何が表示され、何が隠されているのかを判断するための厄介なロジックがコードに残ることがあり、テンプレートは単純明快なロジックifでクリーンでシンプルに保つことができます。

しかし、練習のために、私はHandlebars helperメソッドを使用する解決策に到達しました。

現在のコンテキストの../displayTypeが表示タイプのグループにに属していない場合、クラスに要素を追加することです。

これは、値とリストを渡すことを除いて、{{#if}}ヘルパーと非常によく似ています。値がリストにある場合、ヘルパーはtrueと評価されます。値がではなく、リストにの場合、ヘルパーはfalseと評価され、{{else}}ブロックがレンダリングされます。私は私のヘルパーcontains名付けている：私は私のhash argumentsの一部として配列を渡すことができないので、代わりに私はカンマ区切りの文字列を渡しています

Handlebars.registerHelper('contains', function (options) { 
    var list = (options.hash.list ? options.hash.list.split(',') : []); 
    var value = (options.hash.value || ''); 

    if (list.indexOf(value) > -1) { 
     return options.fn(this); 
    } 
    else { 
     return options.inverse(this); 
    } 
}); 

注意をし、にこれを分割するヘルパーの仕事ですアレイ。

次のように今、私のヘルパーを使用するためのテンプレートのために、それは修正しなければならないであろう。このアプローチについての私の好きな

<!-- display Image only if the type is txtimgdesc or txtimg or img --> 
<img class="img-responsive {{#contains value=../displayType list="txtimgdesc,txtimg"}}{{else}}hidden{{/contains}}" src=""> 

<!-- display header title only if the type is txtimgdesc -->  
<span class="{{#contains value=../displayType list="txtimgdesc" }}{{else}}hidden{{/contains}}">Header title</span> 

<!-- display title only if the type is txtimgdesc or txtimg --> 
<span class="{{#contains value=../displayType list="txtimgdesc,txtimg" }}{{else}}hidden{{/contains}}">{{title}}</span> 

ことの一つは、それがためにクラスを適用することを容易にするということです../displayTypeがの場合です。