0

我有以下 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>

问题：如何将所选课程添加到所选日期？我会很感激有人可以对此有所了解。

4

1 回答 1

2

您需要在数据到达模板之前对其进行按摩。在列表中标记selected日期，available以便您可以在迭代期间对其进行测试。

  1. 将 JSON 解析为对象
  2. 遍历available列表并将 ids 与中的元素进行比较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>
于 2013-08-15T14:42:03.530 回答