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

EmberJS: Memuatkan Berbilang Model pada Laluan Yang Sama

Apabila menggunakan EmberJS, anda mungkin menghadapi situasi di mana anda perlu memuatkan berbilang model yang tidak berkaitan pada laluan yang sama. Ini boleh mengelirukan, terutamanya jika anda baru menggunakan rangka kerja MVC sebelah pelanggan.

Awas:

Sebelum cuba memuatkan berbilang model, pertimbangkan perkara berikut:

• Adakah laluan memuatkan data dinamik berdasarkan slug URL (cth., /books/:id)? Jika ya, jangan muatkan berbilang model daripada cangkuk model, kerana ia boleh melangkau cangkuk model dan menggunakan model yang dibekalkan, yang berpotensi menyebabkan masalah.

Memuatkan Berbilang Model Apabila Sesuai:

Jika laluan tidak mempunyai URL dinamik, anda boleh mengembalikan berbilang model daripada cangkuk model laluan. Contohnya:

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

Memuatkan Berbilang Model dengan Janji:

Jika pengambilan data melibatkan janji, anda boleh menggunakan kaedah RSVP.hash dalam cangkuk model:

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

Memuatkan Model dengan Data Ember:

Jika menggunakan Ember Data, anda boleh menemui berbilang model dalam cangkuk model:

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

Pendekatan Alternatif (lebih sesuai untuk mengendalikan laluan dinamik):

Daripada memuatkan berbilang model daripada cangkuk model, anda boleh menggunakan cangkuk setupController atau afterModel untuk menetapkan sifat model pada pengawal:

Kaedah Pengawal Persediaan:

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

Kaedah Selepas Model:

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

Pendekatan ini memastikan bahawa model adalah tersedia dalam cangkuk setupController, di mana anda boleh menetapkannya dengan selamat kepada sifat pengawal.

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