Ember JS와 Ember Rails의 중첩 된 경로

Question

중첩 된 매장이 ember 템플릿에서 작동하는 방식을 평신도의 용어로 설명 할 수 있습니까? http://emberjs.com/guides/routing/rendering-a-template/

이 현재 경로를 렌더링하기 위해 노력한다는 것을 의미

"즉각적인 부모 경로 ... 주요 콘센트에 렌더링하지 않았다": 워드 프로세서에서 이것을 이해하려고 특히

상위 경로가 템플릿을 렌더링하지 않았거나 부모 경로가 제공 한 템플릿이 이 기본 템플릿 (즉, 기본 {{outlet} }).

더 구체적으로 내 앱에서 중첩 된보기 계층 구조를 만드는 방법을 이해하려고합니다. 컬렉션의 3 층 깊이입니다. 컬렉션의 내용을 기반으로 일련의 축소 가능한 중첩 된 뷰를 만들고 싶습니다. 데이터 구조는 나무 같을 수 있습니다.

라이브러리 -> 각 도서관은 많은 책을 가지고 - 각 도서 실제로 중첩 템플릿 구조를 보여줍니다 예시 jsbin 또는 코드 샘플을 찾고 많은 페이지

있다>. 일반적으로 대부분의 템플릿 언어에서

App.Router.map(function() { 

    this.resource('libraries', function() { 
     this.route('new'); 

     this.resource('library', {path: ':library_id'}, function() { 

      this.resource('books', function() { 
       this.route('new'); 
       this.resource('book', {path: ':book_id'}, function() { 

        this.resource('pages', function() { 
         this.route('new'); 
         this.resource('page', {path: ':page_id'}, function() { 

         }); // Page 
        }); // Pages 

       }); // Book 
      }); // Books 

     }); // Library 
    }); // Libraries 

}); // map 

Answer 1

는 메인 레이아웃에 페이지의 target 내용을 포장 할 수있는 방법을 제공합니다

은 다음과 같습니다 라우터를 상상해보십시오. 이렇게하면 공통 페이지 레이아웃을 다른 파일로 분리하고 작은 대상 템플릿을 다른 파일로 분리 할 수 ​​있습니다.

Ember에서이 작업을 몇 번 반복했지만 현재이 기능은 {{outlet}} 도우미에서 제공합니다. 아웃렛은 Ember의 방법으로 yield을 레이아웃으로 만듭니다.

outlet이 yield에서 크게 발산되는 영역이 중첩됩니다. 서버 쪽에서의 수익률은 훨씬 더 간단합니다. 템플릿의 영역을 표시하기 만하면됩니다. 그런 다음 호출하여 지정된 블록에 내용 블록을 생성해야합니다.

그러나 콘텐츠 렌더링이 클라이언트 측 javascript로 전환 될 때 페이지의 일부만 필요에 따라 업데이트됩니다. 마커에 더 이상 간단하게 yield을 사용할 수 없습니다. 당신은 더 똑똑한 yield 즉 - outlet가 필요합니다.

{{outlet}}에는 양면이 있습니다.

1. 양보하고 싶은 곳을 나타내는 표식. 이것은 {{outlet}} 도우미입니다.
2. 템플릿을이 콘센트에 렌더링하는 코드입니다. renderTemplate 후크 내에서 사용되는 render 방법입니다.

기본적으로 {{outlet}}에는 이름이 필요하지 않습니다. 그러면 해당 템플리트의 기본 출력이됩니다. 템플릿에는 많은 아웃렛이있을 수 있으며 이름을 지정하여 지정할 수 있습니다.예 : -

{{outlet 'sidebar'}} 
{{outlet 'nav'}} 

'sidebar'및 'nav'라는 2 개의 매장을 선언합니다. 이제 다른 템플릿을이 콘센트에 렌더링 할 수 있습니다.

명시된 콘센트 이름없이 렌더링 할 때 기본 콘센트가 사용됩니다. 지정된 콘센트의 경우 의 renderTemplate 후크에있는 render을 호출하여 렌더링을 수행합니다. 옵션으로 render 메서드에 전달 된 해시에 outlet 옵션을 지정하여이 작업을 수행 할 수 있습니다. 여기

renderTemplate() { 
    this.render('recentPosts', { outlet: 'sidebar' }); 
} 

는 템플릿 recentPosts는 부모 템플릿 내부 "사이드 바"라는 콘센트에 렌더링한다.

경로가 다른 중첩 경로 내에 중첩되면 가장 가까운 부모 출구로 렌더링됩니다. 상위 리소스에 기본 콘센트가 없으면 부모가 사용되며 application 템플릿에 도달 할 때까지 계속됩니다.

에 resource을 this.resource('posts');으로 선언하면 규칙에 따라 몇 가지 사항을 나타냅니다.

1. 레이아웃 템플릿 posts을 사용하여 posts 경로를 렌더링하십시오.
2. 선택적으로 posts/index 템플릿을 사용하여 내재적 인 posts.index 경로를 렌더링합니다.

posts 템플릿에는 모든 게시물과 그 하위 리소스에 공통된 레이아웃이 포함되어 있습니다. 최소한 최소한 {{outlet}}과 같은 기본 출력을 포함해야합니다.

이 항목이 없으면 {{outlet}} 자식 경로는 부모 부모에게 즉시 렌더링을 허용하지 않습니다. 그런 다음 부모의 부모 또는 궁극적으로 application 템플릿의 출력물을 렌더링합니다. 이 경우에는 "The immediate parent route did not render into the main outlet ..." 경고가 표시됩니다. 이런 경우에는 outlets의 위치를 ​​확인하십시오.

posts.index은 중첩 된 경로가있는 모든 리소스에 지정된 암시 적 경로입니다. 즉, 리소스에 중첩 된 경로가있는 경우에는 중첩 된 this.route('index을 명시 적으로 선언 할 필요가 없습니다.

이 index 경로는 해당 리소스의 콘텐츠를 표시 할 수 있습니다. 예를 들어 posts.index의 경우 모두 posts의 목록을 표시 할 수 있습니다. 이 암시 적 경로가있는 보조적인주의 사항은 모델이 부모 posts 경로에 있다는 것입니다. PostsIndexController에서이 모델을 얻으려면 needs API를 사용해야합니다.

needs: ['posts'], 
contentBinding: 'controller.posts' 

또한,이 posts.index 경로는 선택 사항입니다. 게시물 목록을 표시하는 데 사용되는 posts/index의 UI를 posts 템플릿 자체에 직접 배치 할 수 있습니다. 그러나 이는 하위 리소스가 posts의 콘센트 옆에있는 게시물 목록으로 렌더링된다는 것을 의미합니다. 명시 적 색인 라우트 사용 여부는 표시해야하는 UI에 따라 결정됩니다.

다른 모든 템플릿 위에 앉아있는 템플릿은 application 템플릿입니다.중첩 된 리소스를 렌더링하려면 outlet이 있어야하며 대개 페이지에 공통된 레이아웃을 포함합니다. 응용 프로그램 템플리트를 지정하지 않으면 기본 템플리트가 사용됩니다. 생성 된 템플릿은 {{outlet}}과 같습니다. 즉, 기본 콘센트 만있는 템플릿입니다.

다음 경로를 고려하십시오. 여기

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

, posts.new은 application 템플릿의 기본 콘센트에 렌더링됩니다 posts 내부 렌더링됩니다 posts로 렌더링됩니다. 나머지 템플릿이 아래에 나열되어 있습니다.

+---------------------------+--------------------------------------------------------+ 
| Route      | Templates used (default outlets)      | 
+---------------------------+--------------------------------------------------------+ 
| posts.index    | posts.index > posts > application      | 
+---------------------------+--------------------------------------------------------+ 
| posts.new     | posts.new > posts > application      | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.index   | post.index > post > posts > application    | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.new   | post.new > post > posts > application     | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.comments.index | comments.index > comments > post > posts > application | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.comments.new | comments.new > comments > post > posts > application | 
+---------------------------+--------------------------------------------------------+ 

이 기본 템플릿 계층 구조

는 render 방법에 into 옵션을 지정하여 변경할 수 있습니다.

renderTemplate: function() { 
    this.render('posts', { into: 'sidebar' }) 
} 

다음은 posts 템플릿은 sidebar 템플릿의 기본 콘센트에 렌더링됩니다.

그게 전부입니다. Outlet은 구성보다 많은 규칙을 사용하는 또 다른 개념입니다. 기본값은 아주 좋으며 동시에 쉽게 사용자 정의 할 수 있습니다.