Come dovrei progettare un'applicazione utilizzando Ember.js per adattarsi a un determinato scenario?

0

Svilupperò un'applicazione in ember.js che è una specie di piccolo CRM attraverso il quale i rappresentanti dei clienti possono rispondere alle richieste dei clienti.

Il layout è piuttosto semplice, ho un layout a 3 colonne. La prima colonna rappresenta tutte le domande dei clienti. La seconda colonna rappresenta il dettaglio della query e della sezione che offre un editor per scrivere e inviare una risposta alla query Thrid column è costituito da tutti i modelli che il rappresentante del cliente. può usare per rispondere a domande di routine.

Ho una precedente esperienza su backbone.js e javascript, ma mi trovo ancora in difficoltà nel pensare, in termini di ember.js. Nel backbone avrei sviluppato un percorso che caricherà la vista principale con le viste secondarie di tre colonne e quindi le viste secondarie. Dato che ember.js è abbastanza diverso da backbone, la mia testa non sta diventando chiara per pianificare l'applicazione.

Secondo la mia ipotesi, utilizzerei tre modelli (cioè query, risposte e modelli) per una singola rotta, ma non sono sicuro di come farlo poiché emberjs consente solo a un modello di collegarsi con la rotta. In secondo luogo ho bisogno di una vista nella sezione delle risposte che possa anche manipolare il markup delle query.

Come proponi di pianificare questa applicazione e di pensare in termini di emberjs?

    
posta Umair Abid 30.09.2014 - 11:22
fonte

1 risposta

5

According to my assumption I would use three models (i.e queries, responses and templates) for a single route, but I am not sure how to do it since emberjs only allows one model to attach with route.

Ember in realtà non applica questa restrizione. Puoi creare un RSVP.hash di tutti i modelli che desideri. Qualcosa come:

QueryRoute = Ember.Route.extend({
  model: function(){
      return Ember.RSVP.hash({
          queries: this.store.find('query'),
          details: this.store.find('detail'),
          templates: this.store.find('template'),
          response: this.store.createRecord('response')
       });
  }
})

-

Per quanto riguarda la tua domanda *:

Puoi creare i tuoi itinerari in modo che ci sia un percorso indice (che elenca tutte le query) e c'è un percorso di query, che elenca i dettagli di una singola query, i modelli di risposta e di risposta.

Quindi il tuo router potrebbe essere simile a questo:

App.Router.map(function() {
  this.resource("queries", function(){
    this.route("query", { path: "/query/:id" })
  });
});

La tua rotta delle query potrebbe essere simile a questa:

QueriesRoute = Ember.Route.extend({
  model: function(){
      return this.store.find('query'); # this will find all queries
  }
});

Sul modello di query, puoi mostrare l'elenco di query e un punto vendita in modo da poter eseguire il rendering della query quando un utente fa clic su di esso.

{{#each query in queries}}
    {{#link-to "query" query}}
        {{query.name}}
        {{query.description}}
    {{/link-to}}
{{#each}}


{{ outlet }}

Una volta che l'utente fa clic sulla query, verranno trasferiti sulla rotta "query". Creiamo quella rotta ora.

QueryRoute = Ember.Route.extend({
  model: function(params){ 
      return Ember.RSVP.hash({
          query: this.store.find('query', params.id),
          details: this.store.find('detail', { query: params.id }),
          templates: this.store.find('template'),
          response: this.store.createRecord('response')
       });
  }
});

Siamo:

a) ricerca della query per tale ID query

b) trovare i dettagli per tale ID query

c) trovare tutti i modelli

d) creazione di un nuovo record di risposta

Nel modello di query, puoi fare qualcosa del tipo:

<div class="query-details">
  <h3>{{query.title}}</h3>
  <small>{{query.description}}</small>

  <p>{{query.details}}</p> # you can loop too if it's an array
</div>

<div class="query-response">
  {{textarea value=response.body}}
  <button {{ action "sendResponse" }}>Send Response</button>
</div>

<div class="templates">
  {{#each template in templates}}
    <h3>{{template.title}}</h3>
    <p>{{template.body}}</p>
    <button {{ action "selectTemplate" template }}>Select Template</button>
  {{/each}}
</div>

Ecco:

a) il rendering del titolo e della descrizione della query, nonché i relativi dettagli

b) il rendering di un modulo di risposta con un'area di testo e pulsante di invio con un'azione di "sendResponse" , cioè quando clicchi, cercherà l'azione "sendResponse" sul suo controller e sul router e continuerà a fare il bubbling fino a quando non troverà l'azione o arriverà all'applicazioneRoute in quale fase genererà un errore.

c) il rendering dei modelli e un pulsante per selezionare qualsiasi modello. Notare l'azione "selectTemplate" che passa anche lungo il parametro "template".

Quindi ... e adesso? Dobbiamo gestire queste azioni e fare la cosa giusta. Possiamo farlo in due punti: QueryController o QueryRoute. Creerò un QueryController.

-

Esistono tre tipi di controller: Object, Array e, beh, il controller predefinito. Un controller di oggetto rappresenta un singolo modello e un controller di array rappresenta una raccolta.

Nel nostro caso, poiché una query è un singolo oggetto, useremo un ObjectController.

QueryController = Ember.ObjectController.extend({
  actions: {

    sendResponse: function(){
      var response = this.get('response');
      var success  = function(){
        console.log("Successfully posted response!");
      };
      var failure = function(err){
        console.log("Something went wrong:", err);
      };
      response.save().then(success, failure);
    },

    selectTemplate: function(template){
      var response = this.get('response');
      response.get('body').set(template.get('body'));
    }

  }
})

Ci sono due azioni:

a) sendResponse: prende la risposta [**] e invia una richiesta POST al tuo server. Quindi esegue le funzioni success / failure quando la promessa save () si risolve.

b) selectTemplate: questo prende solo il template come parametro e imposta il corpo della risposta su quale sia il corpo del template. Ovviamente, se hai più proprietà, puoi impostarle tutte .

-

Questo dovrebbe metterti nella giusta direzione. Ember è in realtà abbastanza semplice una volta che si ottiene un blocco delle convenzioni di base che si aspetta che tu segua; potresti essere sorpreso di quanto tu possa essere produttivo con esso. :)

-

[*] Suppongo che tu stia utilizzando Ember Data; se non lo sei, posso modificare la mia risposta per usare normali query ajax

[**] C'è un po 'da spiegare lì: l'oggetto risposta che hai creato sulla rotta ha proprietà (corpo, per esempio) che cambieranno automaticamente quando l'utente inserisce qualcosa nella textarea. Quindi, quando chiami save (), farà la cosa giusta: serializza il modello e lo POST sul tuo server.

    
risposta data 06.11.2014 - 01:02
fonte

Leggi altre domande sui tag