vendredi 10 novembre 2017

Update model(then on-screen data) after updating an adapter's host name for accessing API

I'm loading data into my Ember-Data store using an adapter(has 2 properties - 'host' and 'namespace').

For argument's sake, let's say our host-name is "https://yyyyy.com", and let's say the data is about customers. The namespace could be 'api'. With that in mind, a common request could be directed to "http://ift.tt/2Ar662V".

For simplicity, this returns an array of JSON objects, and each object only has a single key - that being 'id'. What i'd like to do is access customer data from a different runtime dynamically from within the same app. This means that through the use of some event - for example an "onclick", we change the host from "https://yyyyy.com" to "https://zzzzz.com".

Here's the data I currently have, followed by what i've attempted, and its results:

/templates/customers.hbs

<h3>Customers route</h3>

<button >test importing the new adapter host</button>

    
  ID:      


/routes/customers.js

import Ember from 'ember';   
const { Route, set } = Ember;

export default Route.extend({
  store: Ember.inject.service('store'),
  model(){

  //use of 'reload' is to prevent loading records from cache
  return this.store.findAll('customer', {reload: true});

  },

  setupController(controller, model){    
    set(controller, 'customers', model);    
  },
  actions:{        
    testNewAdapterHost(){

      // alert(this.get('store').adapterFor('baseadapter').get('host')); 
      // returns "https://yyyyy.com" (what I was hoping to see from that alert)

      this.get('store').adapterFor('baseadapter').set('host','https://zzzzz.com');
alert(this.get('store').adapterFor('baseadapter').get('host')); 
// returns "https://zzzzz.com" (new host value - what I was hoping to see from that alert)

      I have tried the following suggestions to get the model to reload with this new host in place, thus hoping for the DOM to update with a new list of customers
      // this.get('model').reload();
      // this.store.get('model').reload();    
      // this.get('model').refresh();
      // the 3 above statements flag an undefined error

      // this.refresh();     
      // this.store.findAll('project', {reload: true});
      // this.get('currentModel').reload();
      // the 3 above statements cause a fresh GET request but with the old host value - ie using https://yyyyy.com instead of the desired https://zzzzz.com (verified through network tab in chrome dev tools)

    } 

Is the way I access the adapter through the use of injecting the store an incorrect way to change/update its host property??

The reason for using 'store' to inject the adapter is based on this answer. (see comments added to the answer)

adapters/baseadapter.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({

  host: 'http://yyyyy.com',      
  //host: 'http://zzzzz.com',      
  namespace: 'api'

});

As mentioned in the comments, some statements return an error(syntax may be off - if so then i'm hoping for a point in the right direction as the docs haven't proven helpful so far).

Other statements cause a fresh request, but the host doesn't seem to have updated.

I'm having no trouble displaying the data from either url when testing each host as the initial value when the app is run.

Any help is appreciated.




Aucun commentaire:

Enregistrer un commentaire