EmberJS에서 동일한 경로에 여러 모델을 로드하는 방법은 무엇입니까?

EmberJS의 동일한 경로에 여러 모델 로드

EmberJS에서는 관련되지 않은 여러 모델을 단일 경로에 로드해야 하는 경우가 있습니다. . 이 개념은 클라이언트 측 MVC 프레임워크를 처음 접하는 사람들에게는 혼란스러울 수 있습니다. 명확한 이해를 돕기 위해 이 가이드에서는 이 시나리오를 처리하는 방법과 URL 매개변수에 대한 경로의 종속성을 기반으로 취해야 할 적절한 접근 방식에 대한 자세한 설명을 제공합니다.

여러 모델 반환에 대한 고려 사항

모델 후크에서 여러 모델을 반환하기 전에 경로가 URL의 slug :id를 기반으로 동적 데이터를 로드하는지 확인하는 것이 중요합니다. 대답이 '예'라면 동일한 후크에서 여러 모델을 로드하는 것을 피해야 합니다. 이는 Ember의 연결 메커니즘을 통해 경로로 전환할 때 모델을 지정할 수 있으므로 모델 후크를 우회하고 대신 제공된 모델을 사용할 수 있기 때문입니다. 여러 모델이 예상되지만 하나만 사용할 수 있으므로 문제가 발생할 수 있습니다.

경로가 동적 데이터를 로드할 때의 대체 접근 방식

경로가 동적을 로드하는 경우 URL 매개변수를 기반으로 하는 데이터의 경우 모델 후크 대신 setupController/afterModel을 사용하여 여러 모델을 로드하는 것이 좋습니다.

SetupController를 사용하면 컨트롤러가 생성되기 전에 모델을 수정할 수 있습니다. 이를 사용하여 컨트롤러에 추가 모델을 추가할 수 있습니다. 예:

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  setupController: function(controller, model){
    this._super(controller,model);
    controller.set('model2', {bird:'is the word'});
  }
});

AfterModel을 사용하면 모델이 로드된 후 모든 비동기 작업을 수행할 수 있습니다. 이를 사용하여 추가 모델을 로드하고 Ember Promise를 사용하여 비동기 요청을 관리할 수 있습니다. 예:

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  afterModel: function(){
    var self = this;
    return $.getJSON('/authors').then(function(result){
      self.set('authors', result);
    });
  }, 
  setupController: function(controller, model){
    this._super(controller,model);
    controller.set('authors', this.get('authors'));
  }
});

경로가 동적 데이터를 로드하지 않을 때 여러 모델 반환

경로가 URL 매개변수를 기반으로 동적 데이터를 로드하지 않는 경우 , 경로의 모델 후크에서 여러 모델을 반환할 수 있습니다. 구문은 간단합니다.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
           model1: ['red', 'yellow', 'blue'],
           model2: ['green', 'purple', 'white']
    };
  }
});

모델 로딩에 Promise가 포함된 경우 Ember RSVP를 사용하여 요청의 비동기 특성을 처리할 수 있습니다. 예를 들어 Ember Data를 사용하면

App.IndexRoute = Ember.Route.extend({
  var store = this.store;
  model: function() {
    return Ember.RSVP.hash({
           cats: store.find('cat'),
           dogs: store.find('dog')
    });
  }
});

이 접근 방식을 사용하면 여러 모델을 동시에 로드하고 템플릿에서 단일 개체로 처리할 수 있습니다.

위 내용은 EmberJS에서 동일한 경로에 여러 모델을 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!