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.