초기 경로 렌더에서 하위 뷰 렌더링을 트리거하는 방법은 무엇입니까?

패트릭 남

나는 이것이 사소한 경우에 쉽게 할 수 있다는 것을 알고 있지만 특정 {{outlet}}하위 뷰에 사용되는 컨트롤러 및 하위 템플릿을 변경하는 기능을 추가 하여 기본 복원 지점에 혼란 스러웠습니다.

여기jsbin 에 대한 작업 예제가 있습니다 . 문제의 화면으로 바로 이동 하려면 이 링크를 사용하십시오 .

문제는 activites\new경로에서 발생 합니다. 보기를 텍스트로 시작하고 싶습니다.

활동을 계속 편집하려면 템플릿을 선택하십시오.

처음 렌더링 될 때. 그러나이 텍스트를 표시하려면 하나의 템플릿을 선택한 다음 선택 항목을 프롬프트로 되돌려 야합니다 - Select Template -.

선택 변경 템플릿 렌더링 작업을 수행하는 관련 개체입니다.

// NewActivityController extends EditActivityController, so this observable 
// is re-used without being shared
App.EditActivityController = Ember.ObjectController.extend({
    activityTypeDidChange: function() {
      var selectedType = this.get('activityType');
      console.log("EditActivityController ActivityTypeDidChange: "
        + (selectedType && selectedType.get('key') || 'null'));
      this.send('changeType', selectedType);
    }.observes('model.activityType')
});

// The controller dispatches an event to trigger the action in the route
App.NewActivityRoute = App.AuthenticatedRoute.extend({
  renderTemplate: function() {
    this.render('edit_activity', {
      controller: 'new_activity'
    });
    // This doesn't work for setting the initial sub-render
    //var type = model.get('activityType');
    //if(type) {
      //this.render("Edit"+type.key, {into: 'index'});
    //} else {
      //this.render("NoActivityType", {into: 'index'});
    //}
  },
  model: function() {
    return App.Activity.create({
      title: "please enter a title",
      subjectCode: "please enter a subject code",
      activityCode: "please enter an activity code",
      activityType: null
    });
  },
  actions: {
    changeType: function(selection) {
      console.log("NewActivityRoute ChangeType called: "
        + (selection && selection.get('key') || 'null'));
      if(selection) {
        this.render("Edit"+selection.get('key'),
                    {outlet: 'edit', into: 'edit_activity'});
      } else {
        this.render("NoActivityType",
                    {outlet: 'edit', into: 'edit_activity'});
      }
    }
  }
});

의견이 말했듯이 초기 렌더링에서 모델을 가져올 수 없습니다. model.get줄만 주석 해제하더라도 컨트롤러와 경로 간의 이벤트 디스패치가 중단됩니다.

콘솔을 열면 모델이 로 초기화 될 때 EditActivityControllerActivityTypeDidChange옵저버가 실행 되는 것을 볼 수 있습니다 . 이것은 이벤트를 전달 하지만 실제로는으로 버블 링 되므로 에서 적절한 하위 뷰를 렌더링하기 위해 처리 할 수 ​​없습니다.activityTypenullchangeTypeApplicationRouteNewActivityRoute

패트릭 남

글쎄, 나는 Route.renderTemplate후크에 대한 근본적인 오해를 가지고 있었다 . model메소드에서 정의 될 것으로 기대할 수 없으며 매개 변수로 지정해야합니다.

renderTemplate( 컨트롤러 , 모델 ) packages / ember-routing / lib / system / route.js : 1148에
정의 됨

현재 경로에 대한 템플릿을 렌더링하는 데 사용할 수있는 후크입니다.

이 메서드는 현재 경로에 대한 컨트롤러와 함께 호출되고 model모델 후크에 의해 제공됩니다. 기본적으로 경로에 controller대해로 구성된 경로의 템플릿을 렌더링 합니다.

명확성을 위해 함수 선언에서 굵게 표시된 매개 변수. renderTemplate코드 후크에 매개 변수를 추가하면 처음에 예상했던대로 정확하게 작동합니다.

renderTemplate: function(controller, model) {
  this.render('edit_activity', {
    controller: 'new_activity'
  });

  var type = model.get('activityType');
  if(type) {
    this.render("Edit"+type.key,
      {outlet: 'edit', into: 'edit_activity'});
  } else {
    this.render("NoActivityType",
      {outlet: 'edit', into: 'edit_activity'});
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

경로에서 뷰를 렌더링하는 방법은 무엇입니까?

분류에서Dev

ZF2에서 기본 렌더링 전략을 JSON으로 변경하는 방법은 무엇입니까?

분류에서Dev

ReactJS에서 모델 변경시 다시 렌더링을 트리거하는 방법은 무엇입니까?

분류에서Dev

Orchard에서 기본 HTML 태그 렌더링을 변경하는 방법은 무엇입니까?

분류에서Dev

SwiftUI에서 실제 뷰 렌더링 크기와 위치를 얻는 방법은 무엇입니까?

분류에서Dev

SurfaceController에서 MVC 뷰를 렌더링하는 방법은 무엇입니까?

분류에서Dev

SailsJS에서 뷰를 문자열로 렌더링하는 방법은 무엇입니까?

분류에서Dev

열 값을 기반으로 dataTable에서 graphicImage를 렌더링하는 방법은 무엇입니까?

분류에서Dev

변경 이벤트 발생시 에디터 뷰에서 셀 뷰의 렌더링 메서드를 호출하는 방법은 무엇입니까?

분류에서Dev

클래스 기반 뷰를 사용하여 다른 앱의 django에서 템플릿을 렌더링하는 방법은 무엇입니까?

분류에서Dev

SwiftUI에서 조건부로 렌더링 된 뷰에 대한 전환을 추가하는 방법은 무엇입니까?

분류에서Dev

Django에서 렌더링하고 조작하기 위해 Json을 성공적으로 전달하는 방법은 무엇입니까?

분류에서Dev

NGXS 비동기 호출 후 Angular 다시 렌더링을 트리거하는 방법은 무엇입니까?

분류에서Dev

controller1의 뷰를 controller2 yii2의 뷰로 렌더링하는 방법은 무엇입니까?

분류에서Dev

Firestore 쿼리에서 'Where'문을 조건부로 렌더링하는 방법은 무엇입니까?

분류에서Dev

Angular에서 조건부로 렌더링하는 방법은 무엇입니까?

분류에서Dev

Angular에서 조건부로 렌더링하는 방법은 무엇입니까?

분류에서Dev

C # MVC5에서보기에서 작업을 렌더링하는 방법은 무엇입니까?

분류에서Dev

MVC 4에서 뷰 요소 중 하나를 XML 텍스트로 렌더링하는 방법은 무엇입니까?

분류에서Dev

Ember : 부모 경로 / 템플릿에서 콘센트로 렌더링하는 방법은 무엇입니까?

분류에서Dev

django-highcharts 패키지를 사용하여 템플릿으로 차트를 렌더링하거나 django에서 정기적으로 추한 렌더링을 사용하는 더 좋은 옵션은 무엇입니까?

분류에서Dev

매초 ReactDOM을 렌더링하는 방법은 무엇입니까?

분류에서Dev

libgdx에서 반복 배경을 렌더링하는 올바른 방법은 무엇입니까?

분류에서Dev

내 ajax 렌더링 속성의 앵커 태그에서 glyphicon을 변경하는 방법은 무엇입니까?

분류에서Dev

뷰 헬퍼가 부분을 렌더링하는지 테스트하는 방법은 무엇입니까?

분류에서Dev

Rails의 뷰에서 오류 메시지를 렌더링하는 방법은 무엇입니까?

분류에서Dev

Vue 2 렌더링 기능에서 슬롯을 사용하는 방법은 무엇입니까?

분류에서Dev

React : 부모의 렌더링 기능에서 자식 유형을 확인하는 방법은 무엇입니까?

분류에서Dev

Java에서 Microsoft Bot Framework로 마크 다운을 렌더링하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    경로에서 뷰를 렌더링하는 방법은 무엇입니까?

  2. 2

    ZF2에서 기본 렌더링 전략을 JSON으로 변경하는 방법은 무엇입니까?

  3. 3

    ReactJS에서 모델 변경시 다시 렌더링을 트리거하는 방법은 무엇입니까?

  4. 4

    Orchard에서 기본 HTML 태그 렌더링을 변경하는 방법은 무엇입니까?

  5. 5

    SwiftUI에서 실제 뷰 렌더링 크기와 위치를 얻는 방법은 무엇입니까?

  6. 6

    SurfaceController에서 MVC 뷰를 렌더링하는 방법은 무엇입니까?

  7. 7

    SailsJS에서 뷰를 문자열로 렌더링하는 방법은 무엇입니까?

  8. 8

    열 값을 기반으로 dataTable에서 graphicImage를 렌더링하는 방법은 무엇입니까?

  9. 9

    변경 이벤트 발생시 에디터 뷰에서 셀 뷰의 렌더링 메서드를 호출하는 방법은 무엇입니까?

  10. 10

    클래스 기반 뷰를 사용하여 다른 앱의 django에서 템플릿을 렌더링하는 방법은 무엇입니까?

  11. 11

    SwiftUI에서 조건부로 렌더링 된 뷰에 대한 전환을 추가하는 방법은 무엇입니까?

  12. 12

    Django에서 렌더링하고 조작하기 위해 Json을 성공적으로 전달하는 방법은 무엇입니까?

  13. 13

    NGXS 비동기 호출 후 Angular 다시 렌더링을 트리거하는 방법은 무엇입니까?

  14. 14

    controller1의 뷰를 controller2 yii2의 뷰로 렌더링하는 방법은 무엇입니까?

  15. 15

    Firestore 쿼리에서 'Where'문을 조건부로 렌더링하는 방법은 무엇입니까?

  16. 16

    Angular에서 조건부로 렌더링하는 방법은 무엇입니까?

  17. 17

    Angular에서 조건부로 렌더링하는 방법은 무엇입니까?

  18. 18

    C # MVC5에서보기에서 작업을 렌더링하는 방법은 무엇입니까?

  19. 19

    MVC 4에서 뷰 요소 중 하나를 XML 텍스트로 렌더링하는 방법은 무엇입니까?

  20. 20

    Ember : 부모 경로 / 템플릿에서 콘센트로 렌더링하는 방법은 무엇입니까?

  21. 21

    django-highcharts 패키지를 사용하여 템플릿으로 차트를 렌더링하거나 django에서 정기적으로 추한 렌더링을 사용하는 더 좋은 옵션은 무엇입니까?

  22. 22

    매초 ReactDOM을 렌더링하는 방법은 무엇입니까?

  23. 23

    libgdx에서 반복 배경을 렌더링하는 올바른 방법은 무엇입니까?

  24. 24

    내 ajax 렌더링 속성의 앵커 태그에서 glyphicon을 변경하는 방법은 무엇입니까?

  25. 25

    뷰 헬퍼가 부분을 렌더링하는지 테스트하는 방법은 무엇입니까?

  26. 26

    Rails의 뷰에서 오류 메시지를 렌더링하는 방법은 무엇입니까?

  27. 27

    Vue 2 렌더링 기능에서 슬롯을 사용하는 방법은 무엇입니까?

  28. 28

    React : 부모의 렌더링 기능에서 자식 유형을 확인하는 방법은 무엇입니까?

  29. 29

    Java에서 Microsoft Bot Framework로 마크 다운을 렌더링하는 방법은 무엇입니까?

뜨겁다태그

보관