把手增加了課程

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"
      }
    ]
  }

我正在使用這樣的把手來生成li：

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

問題：如何將選定的課程添加到選定日期？ 我很感激有人可以對此有所了解。

Answer 1

您需要在數據到達模板之前按摩數據。 在available列表中標記selected日期，以便在迭代期間對其進行測試。

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>