컨트롤러 ember.js의 모델에 디스플레이 데이터 추가

Question

컨트롤러를 사용하여 데이터를 장식하거나 모델에 속하지 않는 데이터를 추가합니다 (서버). 그러나 모델 데이터에 표시 데이터를 추가하여 ember.js의 템플릿에 전달할 수있는 방법을 이해하려고합니다.

다음은 코드 예제입니다. 이 작업을 수행하는 더 좋은 방법이있을 수 있지만 어쩌면 나는 그것을 어렵게 만들고 있습니다.

사용자가 div를 클릭하면 div에 불이 들어 오도록 새 CSS 'select'클래스가 추가되기를 원합니다. DIV에

1. 사용자가 클릭

   조치

2. userSelect 작업이 트리거와 컨트롤러에 isSelected는 사실로 설정됩니다. 이렇게하면 템플릿이 업데이트되고 의 'selected'태그가 클래스 속성에 추가되어 div가 으로 업데이트됩니다.

문제 :

1. 내가 디스플레이를 추가 할 모델의 각 사용자에 isSelected 속성뿐 아니라 모델에 내가 지금하고있는 것 같은. 그게 가능하니?
2. 현재 구현 된 방법으로 'selected'태그는 isSelected = false 일 때만 표시됩니다. 논리가 바뀌거나 isSelected가 새 값에 바인드되는 순서는 템플리트 렌더링 후에 발생합니다.

의 user.js

App.User = DS.Model.extend({ 
    firstName:  DS.attr('string'), 
    lastName:  DS.attr('string') 
}); 

App.User.FIXTURES = 
[ 
{ 
    id:   1, 
    firstName: 'Derek', 
    lastName: "H", 

}, 
{ 
    id:   2, 
    firstName: 'Test', 
    lastName: "H", 

} 
] 

UserListController.js

App.UserListController = Ember.ArrayController.extend({ 
    isSelected: false, 
    userSelect: function(userId){ 

     this.set('isSelected', true); 

     console.debug(userId + " isSelected:" + this.get('isSelected')); 
    } 
}); 

index.html을

<script type="text/x-handlebars" id="userList" data-template-name="userList"> 
    {{#each controller}} 
     <div {{bindAttr class="isSelected:selected:notselected"}} {{action userSelect id}}> 
     </div> 
    {{/each}} 
</script> 

난 그냥 DOM을 조작하고 클래스를 추가 할 수 있음을 인식, 하지만 나는 당신이 엠버를 위해 그것을 할 올바른 접근법을 알고 싶었습니다. 특별히.

감사 어떤 조언, 감사 D

Answer 1

모델에 속성을 추가해도됩니다.

App.User = DS.Model.extend({ 
    firstName: DS.attr('string'), 
    lastName: DS.attr('string'), 

    isSelected: false 
}); 

귀하의 경로는 다음과 같이해야한다 :

{{#each model}} 
    <div {{bindAttr class="isSelected:selected:notselected"}} 
     {{action 'userSelect' this}}> 
    </div> 
{{/each}} 

그리고 컨트롤러 :

App.UserController = Ember.ArrayController.extend({ 
    userSelect: function(user){ 
     user.set('isSelected', true); 
    } 
}); 

것은 그것은 잘 작동합니다 그래서

App.UserRoute = Ember.Route.extend({ 
    model: function() { return App.User.find(); } 
}); 

, 나는 당신의 템플릿을 수정 .

Answer 2

여기서 문제가 isSelected 속성은 목록이 아닙니다 각 개별 사용자를 나타내는 App.UserListController에 있다는 것이다. 컨트롤러를 사용하여 모델 객체를 꾸미는 것이 좋습니다.하지만이 작업을하려면 각 사용자마다 컨트롤러 인스턴스가 필요합니다. 이것이 바로 {{each}} helper's itemController property입니다. 좋은 설명은이 블로그 게시물 밖으로

확인 :

http://gaslight.co/blog/intermediate-ember-controller-concepts

Answer 3

내가 당신의 문제를 이해 바랍니다.

어레이 컨트롤러에서 개별 개체에 대한 속성을 설정할 수 있습니다.

<script type="text/x-handlebars" id="userList" data-template-name="userList"> 
    {{#each controller}} 
     {{#if selected}} 
      div {{bindAttr class="selected"}}></div> 
     {{else}} 
     <div {{bindAttr class="notselected"}} {{action userSelect this}}> 
     </div> 
     {{/if}} 
    {{/each}} 
</script> 

액션 userSelect

App.UserListController=Em.ArrayController.extend({ 
    userSelect:function(ob){ 
    this.map(function(o,i){ 
     Em.set(o,"selected",false); 
     if(ob.id===o.id) 
     Em.set(ob,"selected",true); 
    }); 
    } 
}); 

체크 아웃이 Bin. 체크 아웃 Bin