javascript - Handlebars 增加档次

Question

我有以下 JSON:

 "daysRange": {
    "status": "UNSPECIFIED/ALL/SPECIFIED",
    "available": [
      {
        "id": "1",
        "name": "MONDAY"
      },
      {
        "id": "2",
        "name": "TUESDAY"
      },
      {
        "id": "3",
        "name": "WEDNESDAY"
      },
      {
        "id": "4",
        "name": "THURSDAY"
      },
      {
        "id": "5",
        "name": "FRIDAY"
      },
      {
        "id": "6",
        "name": "SATURDAY"
      },
      {
        "id": "7",
        "name": "SUNDAY"
      }
    ],
    "selected": [
      {
        "id": "2",
        "name": "TUESDAY"
      }
    ]
  }

我使用这样的 Handlebars 来生成 li:

     <ul class="available">
        {{#each daysRange.available}}
          <li data-id="{{this.id}}">{{this.name}}</li>
        {{/each}}
     </ul>  

问题:如何将所选类(class)添加到所选日期？如果有人能对此有所启发，我将不胜感激。

Answer 1

您需要在数据到达模板之前对其进行处理。在可用列表中标记选定日期，以便您可以在迭代期间对其进行测试。

1. 将 JSON 解析为对象
2. 遍历available列表并将ID与selected中的元素进行比较

3. 类似的东西

   if (available[i].id === selected[j].id) 
       available[i].selected = true;`
   

<小时/>

您也可以使用自定义助手来完成此操作，但这对我来说似乎比仅仅更正数据更困惑:

Handlebars.registerHelper('isSelected', function(selected, options) {
    var ret = "";      
    if (this.id === selected[0].id) {
        ret = "selected";
    }
    return options.fn(ret);
});

然后在您的模板中，

 <ul class="available">
     {{#each daysRange.available}}
         <li data-id="{{this.id}}" class="{{#isSelected ../daysRange.selected}}{{this}}{{/isSelected}}">{{this.name}}</li>
     {{/each}}
 </ul>