핸들 바 내가 JSON 다음 한 클래스

Question

를 추가 :이 같은 핸들을 사용하고

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

생성하는 리튬의 :

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

질문 :은 어떻게 선택 일 선택 클래스를 추가 할 수 있습니까? 나는 누군가가 이것에 관해 약간의 빛을 발할 수 있다는 것을 이해할 것이다.

Answer 1

템플릿에 부딪히기 전에 데이터를 마사지해야합니다. 반복 동안 테스트 할 수 있도록 available 목록에 selected 일을 표시하십시오.

1. 객체에 available 목록을 통해
2. 반복 처리를 JSON을 구문 분석하고 selected

3. 뭔가

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

---

처럼 당신이 할 수있는 요소에 ID를 비교 커스텀 도우미와 함께해라. 그러나 이것은 더 지저분 해 보인다. 당신의 데이터를 수정하는 것보다 나에게 : 템플릿에서 다음

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>