2014-12-09 15 views
5

Mentre si scorre attraverso the starter tutorial sul sito di EmberJS, alcune cose mi hanno un po 'confuso ora.Modelli, nomi e questo

Una cosa da notare immediatamente è che ho deciso di utilizzare l'ember 1.9.0beta4 con manubri 2.0.0 anziché 1.8.1/1.3.0 incluso nel pacchetto iniziale.

Prima il codice incluso nel screencast:

app.js 

App.Router.map(function() { 
    this.resource('about'); 
    this.resource('posts'); 
    this.resource('post', {path: ':post_id'}) 
}); 

App.PostsRoute = Ember.Route.extend({ 
    model: function() { 
    return posts; 
    } 
}); 

e

index.html 

{{#each model}} 
    <tr><td> 
    {{#link-to 'post' this}} 
     {{title}} <small class='muted'>by {{author.name}}</small> 
    {{/link-to}} 
    </td></tr> 
{{/each}} 

Questo funziona esattamente come previsto e il post richiesto appare quando si fa clic.

Tuttavia, poiché sto usando 1.9.0, il codice precedente produce un avviso obsoleto per {{#each}}, che mi dice di usare {{#each foo in bar}} invece. Capisco perché questo appare e concordare che la verbosità aiuta a mostrare esattamente quali dati vengono trasmessi.

Così ho cambiare la linea {{#each model}}-{{#each post in model}} e ogni bit di dati scompare ... Allora provo a cambiare il codice per:

updated index.html 

{{#each post in model}} 
    <tr><td> 
    {{#link-to 'post' this}} 
     {{post.title}} <small class='muted'>by {{post.author.name}}</small> 
    {{/link-to}} 
    </td></tr> 
{{/each}} 

Grande! Il titolo e il nome dell'autore appaiono ancora una volta per ogni post. Ma fare clic su entrambi i post mi dà un indefinito id. Cambio {{#link-to 'post' this}} in {{#link-to 'post' this.id}}. Stesso risultato Lo cambio in {{#link-to 'post' post.id}}. Il id è ora incluso ma quando clicco il link ottengo questo errore:

Error while processing route: post Assertion Failed: You used the dynamic segment 
post_id in your route post, but App.Post did not exist and you did not override 
your route's `model` hook. 

Le mie domande sono:

  1. Cosa accade internamente che costringe il prefisso post. se ho semplicemente includere il codice post in? Per me dovrei essere in grado di usare this o continuare a non aver bisogno di alcun prefisso.

  2. Dopo aver aggiunto post in a ciascuna istruzione, cosa succede a this? Perché non si riferisce più allo stesso oggetto?

  3. Come si possono denominare i modelli per semplificare la classificazione? post in model dovrebbe essere in realtà post in posts ma non ho trovato un modo per assegnare un nome al contenitore dei dati.

  4. Che cosa sta causando l'errore ora che non mi riferisco più al modello come this? Come si può rimediare?

risposta

1

tua frustrazione e le domande sono esattamente il motivo per cui la prima sintassi è deprecato e solo la forma each post in ... sarà supportato. Spero che questo risponda alle tue domande e, per favore, rispondi se hai bisogno di chiarimenti.

  1. Nel tuo primo esempio in cui si utilizza each model, la portata delle modifiche a blocchi un post, che significa this si riferisce al post corrente nel ciclo. Quando si utilizza il modulo each post in ..., l'ambito non cambia.Quando non cambia, significa che this si riferisce effettivamente all'ambito precedente (precedente al ciclo). Nell'esempio, l'ambito precedente è il controller dell'array, non l'oggetto post.

  2. questo è legato alla domanda 1. Con il formato each post in ..., this riferisce a quello che era fuori del blocco each. Non è che qualcosa succeda a this, è che qualcosa non funziona non a this perché l'oscilloscopio non cambia.

  3. Per una migliore denominazione di solito impostare una proprietà come un alias per il contenuto del controller di array:

    posts: Ember.computed.alias('content')

  4. Nel tuo esempio originale, quando si fornisce il link-to helper con this, è' passando l'oggetto post completo. Da quello che hai provato, sembra che questo è l'unica cosa che non hai fatto:

    {#link-to 'post' post}}

+0

Penso che tu, insieme a @KalmanHazins, hai chiarito tutto alla perfezione. Grazie! –

1

cercherò di rispondere alle vostre domande in ordine:

  1. Quando dici {{#each model}} stai scorrendo i post (array) nel modello, così ogni volta attraverso il loop this fa riferimento al post corrente. Quindi quando si dice {{title}} si sta davvero dicendo {{this.title}} Quando si è più esplicito, dicendo {{#each post in model}} allora ogni iterazione del ciclo non si riferisce alla this e invece si riferisce alla variabile che hai fatto chiamato post

  2. Come detto in # 1 sopra, this non si riferisce più a ogni singola iterazione. Capisco come stai pensando che forse ancora essere in grado di utilizzare this (a fianco di post) sarebbe conveniente, ma pensa al seguente scenario. Cosa succede quando hai un nidificato {{#each}}? L'implicito this si riferisce all'array esterno o all'array interno? Se davvero non si sente come a digitare l'extra post. si può sempre usare l'helper {{#with post}} manubrio che ambiti post torna a this Vedere l'esempio seguente here

  3. Se si dispone di una proprietà nel modello o il controller, si può assolutamente ciclo attraverso quella struttura come in {{#each color in colors}} Vedi here per un esempio operativo

  4. Infine, il link-to dovrebbe essere {{#link-to 'post' post}}

Problemi correlati