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

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

将JSON解析为对象
遍历available列表并将ID与selected

类似

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>

把手增加了课程

1 个答案: