ember-cli의 Handlebars에서 클래스 변수를 반복하는 방법은 무엇입니까?

Question

I 모델이 속한 카테고리에 따라 체크 해제 적절한 사람과, 엠버 - CLI 체크 박스 (카테고리)의 목록을 생성하여 핸들 바에서 클래스 변수 배열을 반복하고 싶습니다.

나는 몇 가지 문제가 있습니다 - 나는 엠버 - CLI에서 클래스 변수에 액세스하는 방법을 알아낼 수 없습니다. 나는 자습서를 보았다. 엠버에서 .js, 그냥 애플 리케이션 일 뿐이야.리스트. 캘거리.하지만 각 루프를 통과하지는 않아. - 해당 확인란을 선택 취소 하시겠습니까? 그 아래에 janky 코드가 있는데 아마도 작동하지 않을 것입니다.

listing.js :

import DS from "ember-data"; 

var Listing = DS.Model.extend({ 
    categories: DS.attr(), // string array 
}); 

Listing.reopenClass({ 
    CATEGORIES: ['park', 'outdoors'] 
}); 

export default Listing; 

show.hbs는 :

<ul> 
{{#each category in CATEGORIES}} 
<li>{{input type="checkbox" name=category checked=categories.contains(category)}} {{category}}</li> 

{{/each}} 
</ul> 

Answer 1

핸들 바 템플릿은 같은 클래스를 찾아,도 categories.contains(category) 작업과 같은 복잡한 로직을 수행 할 수 없습니다. 프록시 객체를 템플릿에 제공하려면 컨트롤러 또는 구성 요소에 계산 된 속성을 추가해야합니다. 이 제어기이기 가정하고, 여기에서 거친 예제 :

export default Ember.Controller.extend({ 
    selectableCategories: function() { 
    var model = this.get('model'); 

    return model.constructor.CATEGORIES.map(function(category) { 
     var categoryProxy = Ember.Object.create({ 
     model: model, 
     name: category, 
     checked: function(key, value) { 
      var model = this.get('model'); 

      // setter; the checkbox value has changed 
      if (arguments.length > 1) { 
      if (model.get('categories').contains(this.get('name'))) { 
       model.get('categories').removeObject(this.get('name')); 
      } 
      else { 
       model.get('categories').addObject(this.get('name')); 
      } 
      } 

      // getter; the template is checking whether the checkbox should be checked 
      return model.get('categories').contains(this.get('name')); 
     }.property('model.categories') 
     }); 

     return categoryProxy; 
    }); 
    }.property('model.categories') 
}); 

selectableCategories 계산 재산권 모델의 categories 특성을 관찰하고, 각 카테고리는 그 안에서 발견되었는지의 여부를 나타내는 오브젝트의 배열을 반환한다.

그런 다음 템플릿, 당신은 다음과 같이 프록시 객체를 사용할 수 있습니다

{{#each category in selectableCategories}} 
    {{input type="checkbox" name=category.name checked=category.checked}} {{category.name}} 
{{/each}}