Bagaimana untuk Memuatkan Berbilang Model pada Laluan yang Sama dalam EmberJS?

Memuatkan Berbilang Model pada Laluan Yang Sama dalam EmberJS

Dalam EmberJS, kadangkala perlu memuatkan berbilang model yang tidak berkaitan ke dalam satu laluan . Konsep ini boleh mengelirukan bagi pendatang baharu kepada rangka kerja MVC sebelah pelanggan. Untuk membantu menjelaskan, panduan ini memberikan penjelasan terperinci tentang cara mengendalikan senario ini dan pendekatan yang sesuai untuk diambil berdasarkan kebergantungan laluan pada parameter URL.

Pertimbangan untuk Mengembalikan Berbilang Model

Sebelum mengembalikan berbilang model dalam cangkuk model, adalah penting untuk menentukan sama ada laluan memuatkan data dinamik berdasarkan slug :id dalam URL. Jika jawapannya ya, memuatkan berbilang model dari cangkuk yang sama harus dielakkan. Ini kerana mekanisme pemautan Ember membolehkan anda menentukan model apabila beralih ke laluan, yang akan memintas cangkuk model dan sebaliknya menggunakan model yang disediakan. Ini boleh menyebabkan masalah kerana anda menjangkakan berbilang model, tetapi hanya satu yang akan tersedia.

Pendekatan Alternatif Apabila Laluan Memuatkan Data Dinamik

Jika laluan dimuatkan secara dinamik data berdasarkan parameter URL, adalah disyorkan untuk memuatkan berbilang model menggunakan setupController/afterModel dan bukannya cangkuk model.

SetupController membenarkan anda mengubah suai model sebelum pengawal dibuat. Anda boleh menggunakan ini untuk menambah model tambahan pada pengawal. Contohnya:

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 membenarkan anda melakukan sebarang operasi tak segerak selepas model dimuatkan. Anda boleh menggunakan ini untuk memuatkan model tambahan dan menggunakan janji Ember untuk mengurus permintaan tak segerak. Contohnya:

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

Mengembalikan Berbilang Model Apabila Laluan Tidak Memuatkan Data Dinamik

Jika laluan tidak memuatkan data dinamik berdasarkan parameter URL , anda boleh meneruskan dan mengembalikan berbilang model daripada cangkuk model laluan. Sintaksnya adalah mudah:

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

Jika pemuatan model melibatkan janji, anda boleh menggunakan Ember RSVP untuk mengendalikan sifat tak segerak permintaan. Contohnya, menggunakan Data Ember:

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

Pendekatan ini membolehkan anda memuatkan berbilang model secara serentak dan mengendalikannya sebagai satu objek dalam templat.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Berbilang Model pada Laluan yang Sama dalam EmberJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!