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

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

EmberJS를 사용할 때 관련 없는 여러 모델을 로드해야 하는 상황이 발생할 수 있습니다. 같은 경로. 특히 클라이언트 측 MVC 프레임워크를 처음 사용하는 경우 혼란스러울 수 있습니다.

주의:

여러 모델을 로드하기 전에 다음을 고려하세요.

• 경로가 URL 슬러그(예: /books/:id)를 기반으로 동적 데이터를 로드하고 있나요? 그렇다면 모델 후크를 건너뛰고 제공된 모델을 사용하여 잠재적으로 문제를 일으킬 수 있으므로 모델 후크에서 여러 모델을 로드하지 마십시오.

적절할 때 여러 모델 로드:

경로에 동적 URL이 없으면 경로의 모델 후크에서 여러 모델을 반환할 수 있습니다. 예:

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

Promise가 포함된 여러 모델 로드:

데이터 가져오기에 Promise가 포함된 경우 모델 후크에서 RSVP.hash 메서드를 사용할 수 있습니다.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
           model1: promise1,
           model2: promise2
    });
  }
});

Ember 데이터로 모델 로드:

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')
    });
  }
});

대체 접근 방식(동적 경로 처리에 더 적합):

모델 후크에서 여러 모델을 로드하는 대신 setupController 또는 afterModel 후크를 사용하여 컨트롤러에서 모델 속성을 설정할 수 있습니다.

설정 컨트롤러 방법:

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'});
  }
});

이후 모델 방법:

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'));
  }
});

이 접근 방식은 모델이 setupController 후크에서 사용할 수 있으며 컨트롤러 속성에 안전하게 할당할 수 있습니다.

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