如何根据 JSON 响应类型 HandleBars 显示 Html DOM 元素

Question

我正在使用车把模板，我有一个 json，其中属性为 "displayType"，基于此我需要 show/hide dom 元素。

我在我的 DOM 中列出了需要显示的评论。所以条件不能正常工作，并且是新手。

JSON 对象：

{
  "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 级别 3:

<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 不属于 某些显示类型组，则任务是向元素添加 class。

在我看来，这与 {{#if }} 助手非常相似，只是我们要传递一个值和一个列表。如果该值在列表中，帮助器将评估为 true。如果列表中的值为 not，则助手将计算为 false 并且 {{else}} 块将呈现。我已将我的帮手命名为 contains:

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);
    }
});

请注意，我无法将数组作为 hash arguments 的一部分传递，因此我传递的是逗号分隔的字符串，助手的工作是将其拆分为数组。

现在，为了让您的模板使用我的助手，它必须进行如下修改：

<!-- 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 是时，它可以很容易地应用 class .

如何根据 JSON 响应类型 HandleBars 显示 Html DOM 元素

How to Display the Html DOM Elements based on JSON response type HandleBars

javascript

jquery

handlebars.js