ember.js + 핸들 바 : 렌더 vs 아울렛 vs 부분 vs 뷰 vs 컨트롤

ember.js + 핸들 바 : 렌더 vs 아울렛 vs 부분 vs 뷰 vs 컨트롤

---

주위에 각각에 대한 설명이 흩어져 있지만 차이점과 사용법에 대해서는 아직 100 % 명확하지 않습니다. 누군가 나를 나란히 비교할 수 있습니까?

{{outlet}}
{{outlet NAME}}
{{render}}
{{partial}}
{{view}}
{{control}}

참고 : 이 게시물 은 부분 렌더링과 렌더링에 매우 유용했습니다.

---

이들은 모두 emberjs 가이드에 설명 된 다음과 같은 주요 특성을 가진 템플릿 도우미입니다. ( http://emberjs.com/guides/templates/rendering-with-helpers/ )

1. {{outlet}}- 라우터에 의해 결정된 경로에 기초하여 템플릿을 렌더링한다. 경로를 기반으로 해당 컨트롤러와보기가 사용됩니다. 이는 가장 일반적인 경우 인 경로를 기반으로 콘텐츠를 렌더링 할 때 유용합니다 .

2.- {{outlet NAME}}콘텐츠를 정확히 렌더링 할 경로를 지정할 수있는 기능을 제공합니다. 경로에 대해 둘 이상의 템플릿에서 콘텐츠를 렌더링하려고 할 때 유용합니다 .

3.- {{render}}유사 outlet하지만 컨트롤러 / 뷰 / 모델은 헬퍼에서 직접 또는 간접적으로 지정할 수 있습니다. 컨텍스트 (보기 / 컨트롤러) 및 모델을 재정의 할 수있는 기능이있는 둘 이상의 템플릿에서 콘텐츠를 렌더링해야 할 때 유용합니다. 모델이 지정되면 해당 컨트롤러의 고유 인스턴스를 사용하고, 그렇지 않으면 싱글 톤 인스턴스를 사용합니다. 여러 템플릿 콘텐츠를 렌더링하면서 경로의 컨텍스트 및 모델을 재정의해야 할 때 유용합니다 .

4. {{control}}- 대신 싱글 컨트롤러를 재사용의 모든 통화에 대해 새 컨트롤러 인스턴스를 사용하는 것을 제외하고 작품, 렌더링 좋아합니다. 사용 render하는 경우 모델을 지정하지 않고 동일한 경로에 대해 다중 렌더를 사용할 수 없습니다.이 경우를 control사용해야합니다. 렌더링 된 모든 템플릿 콘텐츠에 대해 컨트롤러의 새 인스턴스를 지원하는 데 유용합니다.

업데이트 : 제어 도우미가 제거되었습니다 https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d .

5. {{partial}}- 인자로 표현되는 템플릿을 취하고, 대신에 그 템플릿을 렌더링한다. 컨텍스트 나 범위는 변경되지 않습니다. 주어진 템플릿을 현재 범위와 함께 제자리에 놓기 만하면됩니다. 따라서 부분에 대해 뷰 클래스가 지정되지 않았습니다. 뷰 클래스를 만들지 않고 더 나은 제어 또는 재사용을 위해 템플릿을 템플릿 모듈로 분리해야 할 때 유용합니다 .

6.- {{view}}이것은 부분적으로 작동하지만 뷰 클래스가 제공됩니다. 뷰 클래스는 사용할 템플릿을 지정합니다. 템플릿을 모듈로 분할 할 때 유용하지만 이벤트 처리를 위해 뷰 클래스가 필요합니다.

7.- {{#view}}뷰 헬퍼의 블록 형태도있어 부모 뷰 템플릿과 함께 자식 뷰의 템플릿을 인라인으로 지정할 수 있습니다. ( http://emberjs.com/guides/views/inserting-views-in-templates/ )

---

{{outlet}} 중첩 된 리소스 / 라우트가 경로 템플릿 내에서 렌더링되는 위치를 정의합니다.

{{outlet NAME}} 이것은 프로그래밍 방식으로 무언가를 렌더링 할 수있는 명명 된 콘센트를 생성합니다.

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route's template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',    
      controller: 'blogPost'
    });
  }
});

{{render}} 두 개의 매개 변수를 사용합니다.

첫 번째 매개 변수는 설정할 컨텍스트를 설명합니다. 선택 사항 인 두 번째 매개 변수는 모델이며 제공되는 경우 컨트롤러로 전달됩니다.

{{render}} 몇 가지를 수행합니다.

모델이 제공되지 않으면 해당 컨트롤러의 싱글 톤 인스턴스를 가져옵니다. 모델이 제공되면 해당 컨트롤러의 고유 인스턴스를 가져옵니다.이 컨트롤러를 사용하여 명명 된 템플릿을 렌더링합니다. 해당 컨트롤러의 모델을 설정합니다.

{{partial}} 인수로 렌더링 할 템플릿을 취하고 해당 템플릿을 제자리에 렌더링합니다 (현재 범위를 컨텍스트로 사용).

{{view}}이 도우미는 현재 템플릿 내에서 렌더링 할 템플릿을 제공하는 대신 뷰 클래스를 제공한다는 점을 제외하면 부분 도우미처럼 작동합니다. 보기는 렌더링되는 템플릿을 제어합니다.

{{control}}되어 사용되지 않는 대신 싱글 컨트롤러를 재사용의 모든 통화에 대해 새 컨트롤러 인스턴스를 사용하는 것을 제외하고 작품, 렌더링 좋아합니다.

Most of this I just copied and pasted from their documentation: http://emberjs.com/guides/templates/rendering-with-helpers/

---

1. render helper is deprecated in v2.x instead you need to use ember-elsewhere addon. https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
2. ember.view is deprecated in v1.x instead use Component. refer https://emberjs.com/deprecations/v1.x/#toc_ember-view
3. control helper is experimental only, its already removed

I would say currently only {{outlet}} is encouraged one remaining all are either deprecated/removed.

---

Main differences are

{{view}} renders the provided view class which should be available

{{partial}} renders the template available in Ember.TEMPLATES. its may not have related the view class. Advantage is context of the template remains of the parent view.

{{outlet}} Specify the router that here it is supposed to render the provided view or template or as per renderTemplate() hook.

{{outlet NAME}} useful when you want to render two views/templates at different positions. You can name the outlets and ask router to render.

{{render}} same as outlet except you force the router to render specific view/template.

ReferenceURL : https://stackoverflow.com/questions/19982257/ember-js-handlebars-render-vs-outlet-vs-partial-vs-view-vs-control