2012-12-01 3 views
1

나는 emberJS를 우연히 발견하여 다음 웹 응용 프로그램을 시험해 볼 가치가 있다고 생각했습니다.Ember Handlebars의 각 블록을 중첩하여 컨텍스트 바인딩을 사용 중

실제로 계획하고있는 것은 객체의 목록을 2 차원 방식으로 표시하는 것입니다 (atm 이것은 테이블이 될 수 있음).

내가 지금까지 가지고 :

<script type="text/x-handlebars"> 
<table width="100%" style="text-align:left"> 
    <tr> 
    <th> 
    </th> 
    {{#each App.MyController.getColumnValues}} 
     <th>{{this}}</th> 
    {{/each}} 
    </tr> 
    {{#each App.MyController.getRowValues}} 
    <tr> 
     <th>{{this}}</th> 
     {{#each App.MyController.getColumnValues}} 
     {{view App.CountView rowBinding="this" columnBinding="../this"}} 
     {{/each}} 
    </tr> 
    {{/each}} 
</table> 
</script> 

을하고 countView을 위해 : 당신이 볼 수있는 바와 같이

<script type="text/x-handlebars" data-template-name="countView"> 
    <td>{{view.row}} - {{view.column}}</td> 
</script> 

, 나는 테이블은 각 셀의 현재 열 및 행의 값을 갖는 원하는 . columnBinding을 제외한 모든 것이 작동합니다. Handlebars 페이지 {{..//}}에서 부모 템플릿 범위를 처리하는 방법을 읽었습니다. 두 중괄호 (그것에 대한 추가보기를 만들지 않고 꽤 잘 작동합니다.)하지만 나중에 그것을 전달하는 함수를 호출 할 필요가 열 및 행 값 및 생각 (그것을 맑게)보기 좋을 것이다. .? 점

모든 아이디어를 어떻게 부모 템플릿 범위를 액세스하고 countView에 전달

답변

2

을 당신은 항상이 경우로 {{each}} 블록에 변수를 사용할 수있는 혼란을 방지하기 위해, 당신은이 방법을 시도 할 수 있습니다 :

{{#each row in App.MyController.getRowValues}} 
    <tr> 
    <th>{{row}}</th> 
    {{#each column in App.MyController.getColumnValues}} 
     {{view App.CountView rowBinding="row" columnBinding="column"}} 
    {{/each}} 
    </tr> 
{{/each}} 

+0

이 작동합니다. 고마워. Ember 가이드를 읽는 동안 각 루프의 항목 이름을 지정하지 않았습니다. 어쩌면 자습서 나 더 나은 지침을 알고 있습니까? Ember API는 매우 명쾌하지는 않습니다. – Woyzeck

+1

이 정보는 docs –

+0

대신 emberjs 웹 사이트 http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each API 섹션에서 볼 수 있습니다. 자세한 내용은 http://handlebarsjs.com/을 방문하십시오. 나만의 도우미를 쓰는 것을 포함하는 상세한 정보 –