세부 뷰 템플릿을 emberjs에서 렌더링하려면 어떻게해야합니까?

Question

EmberJs에 익숙하지 않아 목록에서 항목을 선택한 후 세부보기를 표시하는 것처럼 간단한 작업을하려고합니다. 설정했습니다. this jsfiddle

내 경로의 renderTemplate 기능에서 콘솔 로깅을 수행하여 함수가 호출되었는지 확인합니다. 내 PostsRoute를 들어, 작동,하지만 난 보조 노트에

App.PostsDetailsRoute = Ember.Route.extend({ 

    renderTemplate: function() { 
     console.log('template PostsDetails rendered'); 
     this.render(); 
    } 
}); 


App.PostsRoute = Ember.Route.extend({ 
    posts: [], 
    setupController: function (controller) { 
     controller.set('posts', App.Post.find()); 
    }, 
    renderTemplate: function() { 
     console.log('template Posts rendered'); 
     this.render(); 
    } 

}); 

<script type="text/x-handlebars" id="posts"> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span3"> 
       <table class='table'> 
        <thead> 
         <tr><th>Recent Posts</th></tr> 
        </thead> 
        {{#each post in posts}} 
        <tr><td> 
          {{#linkTo details post.id}}{{post.title}}{{/linkTo}} 
         </td></tr> 
        {{/each}} 
       </table> 
      </div> 
     </div> 
    </div> 
</script> 

<script type="text/x-handlebars" data-template-name="posts/details"> 
    {{post.description}} 
</script> 

경로 PostsDetailsRoute.renderTemplate에서 어떤 출력을 얻을

템플릿, uing의 차이 무엇 EmberJs가있는 핸들 막대 템플릿의 데이터 템플릿 이름과 ID?

Answer 1

여기에 몇 가지 일이 있습니다.

• 라우터에서 details을 자원으로 정의했지만 앱에서 경로로 사용합니다. 이 둘의 차이점은 Ember.js guide에서 찾을 수 있습니다. 명명 규칙의 차이점에 유의하십시오. details이 하위 리소스로 정의 된 경우 Ember는 DetailsController 컨트롤러와 일치시킵니다. 자원은 당신이 원하는 것을 사실이지만, 현대의 이론은, 그것은 단순히 post를 호출, 따라서 PostController, PostRoute와 일치해야한다는 것입니다 등

여기에 라우터의 모습 내용은 다음과 같습니다

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

• 자세한 내용은 렌더링 할 수있는 {{outlet}} 태그가 없습니다. 여기에 UI 결정을 내릴 수 있습니다 : 포스트의 세부 사항을 포스트의 인덱스 아래 또는 새 스크린에서 렌더링합니까? 전자의 경우 posts 템플릿에 {{outlet}} 태그를 추가해야합니다. 후자의 경우 posts 템플릿을 {{outlet}}으로 대체하고 현재 내용을 posts/index 템플릿으로 옮겨야합니다.

• 경로 또는 리소스에 연결할 때 모델의 id이 아닌 {{linkto}} 도우미로 실제 모델을 전달해야합니다.

• 을 통해 post 경로에 모델을 제공하면 라우터는 모델을 컨트롤러의 content 속성에 저장합니다. PostController은 기본적으로 ObjectController이므로 모델의 속성도 this으로 프록시합니다. 따라서 post 템플릿에서는 또는 {{description}}을 통해 description에 바인딩해야합니다.

• PostsRoute의 모델 고리를 사용하여 게시물을로드하면 몇자를 절약 할 수 있습니다. Ember는 content 속성을 PostsController으로 설치하므로 템플릿을 약간 업데이트해야합니다.

Here's the updated jsfiddle with the above changes.