2013-02-26 2 views
8

사용자 계정 (아이콘, 이름, 공급자 등)에 대한 데이터가있는 컨트롤러가 있습니다. 각 루프의 출력 내에서 특정 모델을 통해 전달 된 공급자를 기반으로 CSS 클래스를 동적으로 빌드하는 뷰가 있습니다.Ember.js :보기로 모델 전달

내가 가진 질문은 두 가지입니다.

  1. "계정"또는 현재 반복되는 항목을보기에 어떻게 전달합니까?
  2. 전달한 후 어떻게 참조 할 수 있습니까?

아주 자주 발생하지만 뭔가 예제가없는 것 같습니다. 누군가는 이것에 약간 입력을 제안 할 수 있는가?

답변

11

뷰는 좀 더 간단한 방법을 허용하는보기에서 특별한 content 속성이 있습니다 : 당신은 단지 view.content. 부분없이 모델의 재산의 이름을 사용합니다.
컨트롤러를 반복 할 때 루프 변수의 이름을 생략하고 this guide처럼 this을 대신 사용할 수 있습니다. 이것은 필요하지 않지만 코드를 조금 더 깨끗하게 만들 수 있습니다.
또한, 뷰의 템플릿 내에서 당신은 일반적으로 ... 당신이 좋아 할 수 있는지 있지만 외부 변수를 참조 할

{{#each controller}} 
    {{#view App.IndexView contentBinding="this"}} 
     <h4>{{name}}</h4> 
     <img {{bindAttr src="icon"}} /> 
     <i {{bindAttr class="provider"}}></i> 
     <i> {{icon}} </i> 
     <i>{{provider}}</i> 
    {{/view}} 
{{/each}} 

필요하지 않습니다 그리고 당신은 항상 함께보기 내에서 content 속성에 액세스 할 수 있습니다 :

this.get('content'); 
2

현재 반복 된 항목은 속성 바인딩을 사용하여보기로 전달 될 수 있으며 템플릿의 "{{view.property}}"로 참조 될 수 있습니다. 예 :

{{#each account in controller}} 
    {{#view App.IndexView itemBinding="account"}} 
      <h4>{{view.item.name}}</h3> 
      <img {{bindAttr src="account.icon"}} /> 
      <i {{bindAttr class="account.provider"}}></i> 
       <i> {{view.item.icon}} </i> 
       <i>{{view.item.provider}}</i> 
     {{/view}} 
{{/each}} 

나는 위의 경우에 대해 간단한 jsfiddle를 만들었습니다. 그것을 확인하고 문제를 해결할 수 있었는지 알려주십시오.

바이올린의 URL : http://jsfiddle.net/nCyn6/3/

+0

Kavitha ... 그건 의미가 있습니다. 또한 위의 providerClass 함수에서 View 코드 자체의 "account"항목에 어떻게 액세스합니까? – commadelimited

+0

@commadelimited this.get ('item') –

+0

@ kavitha.ph 컨테이너 뷰의 뷰에서 모델을받는 방법에 대한 아이디어가 있습니까? [관련 게시물] (http://stackoverflow.com/questions/15081058/ember-js-how-to) -use-multiple-models-controllers-and-same-page) –

관련 문제