Wie laden Sie die Daten auf der Seite mit EmberJS

Question

Ich habe eine Suchergebnisseite, die mit EmberJS entwickelt wird. Ich benutze Ember.Route, um Daten von API zu laden. Die Such-API, die ich verwendete, ist sehr langsam. Also entschieden wir uns, die Daten von einer Cache-API zu laden. Aber das Problem ist, dass der Cache einige alte Daten haben könnte. Daher haben wir uns entschieden, Daten auf der bereits geladenen Seite mithilfe der Such-API erneut zu laden.

Meine bestehenden Leitungswegcode würde aussehen wie dieses

define(‘search’, ['jquery'], function($) { 
    var route = Ember.Route.extend({ 
    model: function() { 
     return searchApiCall(someParameter); 
    }, 
    setupController: function(controller, model) { 
     controller.set('model', model); 
    } 
    }); 
    return route; 
}); 

In dem obigen Code, bin nur die Suche API aufrufen und die JSON-Antwort zurück. Aber was ich will, ist etwas wie unten.

define(‘search’, ['jquery'], function($) { 
    var route = Ember.Route.extend({ 
    model: function() { 
     setTimeout(function(){ 
     return searchApiCall(someParameter); 
     }, 10); 
     return cachedSearchResult(someParameter); 
    }, 
    setupController: function(controller, model) { 
     controller.set('model', model); 
    } 
    }); 
    return route; 
}); 

Also, was in dem obigen Code Suche ist das zwischengespeicherte Ergebnis zunächst passieren und dann lädt irgendwie das Ergebnis von tatsächlichen Suche api, wenn seine zur Verfügung.

Bitte lassen Sie mich wissen, was der beste Weg dafür in EmberJS ist.

Answer 1

Mein Ansatz wäre, den afterModel-Hook zu verwenden, so etwas wie ... obwohl Ihre Version von Ember ein bisschen alt aussieht, also hoffentlich verfügbar ist.

const set = { Ember }; 

define(‘search’, ['jquery'], function($) { 
    var route = Ember.Route.extend({ 
    model: function() { 
     return { 
      searchResults: cachedSearchResult(someParameter); 
     }; 
    }, 
    setupController: function(controller, model) { 
     controller.set('model', model); 
    }, 
    afterModel: function(model) { 
     let searchResults = searchApiCall(someParameter); 
     set(model, 'searchResults', searchResults); 
    } 
    }); 
    return route; 
});