ember.js : <a href="http://emberjs.com/guides/" rel="nofollow">ember guide</a>의 <a href="https://github.com/tildeio/bloggr-client" rel="nofollow">bloggr-client</a>에서 시작하는 중첩 된 자원 콘센트의 조건부 배치

Question

"posts"의 콘센트를 각 루프의 'posts'에 포함 시키면 어떤 종류의 동작과 유사합니다.

는, 예를 들어, 라우터는 다음과 같습니다

이

App.Router.map(function() { 
    this.resource('posts', function() { 
    this.resource('post', { path: ':post_id' }); 
    }); 
}); 

같은 것을해야한다 (가독성을위한 HTML 태그 삭제) 템플릿 :

<script type="text/x-handlebars" id="posts"> 
    {{#each model}} 
    {{#link-to 'post' this}}{{title}}{{/link-to}} 
    {{#if :post_id given and corresponding with this post}} <-- that's pseudo code ;-) 
     {{outlet}} 
    {{/if}} 
    {{/each}} 
</script> 

어떤 생각이 얼마나 제대로이를 위해?

UPDATE 1 :

이 URL에 출력을 명확히하기 위해 '/ 게시물은'해야한다 '/ 글/1'의 URL에

post 1 title 
post 2 title 
post 3 title 

: 홈페이지에

post 1 title 
complete post 1 
post 2 title 
post 3 title 

'/posts/2 ':

Answer 1

기본적으로 아코디언으로 posts 경로의 게시물을 모두 표시 하시겠습니까? 템플릿 당 하나의 {{outlet}} 만 가질 수 있기 때문에 잘못 될 것입니다.

<script type="text/x-handlebars id="components/post-card"> 
    {{#link-to 'post' post tagName="h2"}}{{post.title}}{{/link-to}} 
    <p>{{post.snippet}}</p> 
</script> 

그리고이 같은 posts 경로에 전화 : 당신이하고 싶은 다음과 같이 보일 것이다하는 component을 구축입니다

<script type="text/x-handlebars" id="posts"> 
    <ul> 
    {{#each}} -> if you're iterating through the model, no need to specify 
    <li> 
    <h3 {{action makeActive}}>{{title}}</h3> 
    {{#if active}} 
     {{post-card post=this}} 
    {{/if}} 
    </li> 
    {{/each}} 
    </ul> 
</script> 

당신은의 속성으로 active을 추가하여 모델이고 makeActive은 컨트롤러에서 주어진 모델에 대해 active을 true로 설정하고 다른 것들을 false로 만드는 작업입니다. 경로가 업데이트되지 않더라도 아코디언을 모델링합니다.