2014-12-09 24 views
5

Während ich durch the starter tutorial auf EmberJS Website läuft, ein paar Dinge haben mich jetzt ein wenig verwirrt.Models, Naming, und dies

Eine Sache, sofort zu beachten ist, dass ich mich entschieden habe, das ember 1.9.0beta4 mit Lenker 2.0.0 anstelle von 1.8.1/1.3.0 zu verwenden, die im Starterpaket enthalten sind.

Zuerst wird der Code in den Screencasts enthalten:

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; 
    } 
}); 

und

index.html 

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

Dies funktioniert genau wie erwartet und die angeforderte Post erscheint, wenn darauf geklickt.

Da ich jedoch 1.9.0 verwende, erzeugt der vorhergehende Code eine veraltete Warnung für {{#each}}, die stattdessen {{#each foo in bar}} verwenden soll. Ich verstehe, warum dies angezeigt wird und stimme zu, dass die Ausführlichkeit genau zeigt, welche Daten durchgeschleift werden.

So ändern Sie die Zeile {{#each model}}-{{#each post in model}} und jedes Bit der Daten verschwindet ... Ich versuche dann, um den Code zu ändern:

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}} 

Great! Der Titel und der Name des Autors erscheinen erneut für jeden Beitrag. Aber das Klicken auf einen der beiden Posts gibt mir einen undefinierten id. Ich ändere {{#link-to 'post' this}} zu {{#link-to 'post' this.id}}. Gleiches Ergebnis. Ich ändere es zu {{#link-to 'post' post.id}}. Die id ist nun enthalten, aber wenn ich auf den Link klicken ich diesen Fehler:

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. 

Meine Fragen sind:

  1. Was intern passiert, dass das post. Präfix zwingt, wenn ich den post in Code einfach ein? Ich sollte in der Lage sein, entweder this zu verwenden oder weiterhin kein Präfix zu benötigen.

  2. Nach dem Hinzufügen von post in zu jeder Anweisung, was passiert mit this? Warum bezieht es sich nicht mehr auf das gleiche Objekt?

  3. Wie können Modelle benannt werden, um die Kategorisierung zu vereinfachen? post in model sollte wirklich post in posts sein, aber ich habe keine Möglichkeit gefunden, den Datencontainer zu benennen.

  4. Was verursacht jetzt den Fehler, dass ich nicht mehr auf das Modell als this Verweise? Wie kann es behoben werden?

Antwort

1

Ihre Frustration und Fragen sind genau der Grund, warum die erste Syntax ist veraltet und nur die each post in ... Form unterstützt werden. Hoffentlich beantwortet dies Ihre Fragen und bitte antworten Sie, wenn Sie eine Klärung benötigen.

  1. In Ihrem ersten Beispiel, in dem Sie each model verwenden, bezieht sich der Umfang der Block Änderungen an einem Pfosten, was bedeutet, this zum aktuellen Beitrag in der Schleife. Wenn Sie das Formular each post in ..., ändert sich der Bereich nicht.Wenn es sich nicht ändert, bedeutet dies, dass this sich tatsächlich auf den vorherigen Bereich bezieht (vor der Schleife). In Ihrem Beispiel ist der vorherige Bereich der Array-Controller, nicht das Post-Objekt.

  2. Dies bezieht 1. Mit dem each post in ... Format zu hinterfragen, zu this bezieht sich, was es außerhalb des each Block war. Es ist nicht so, dass etwas passiert mit this, es ist, dass etwas passiert nicht passieren this weil der Umfang nicht ändert.

  3. Zur besseren Namensgebung ich in der Regel eines Setup Eigenschaft als Alias ​​für den Content in dem Array-Controller:

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

  4. In Ihrem ursprünglichen Beispiel, wenn Sie die link-to Helfer mit this liefern, Sie‘ Übergeben Sie das vollständige Postobjekt. Von dem, was Sie versucht haben, sieht es aus wie das die eine Sache, ist nicht wahr machen:

    {#link-to 'post' post}}

+0

Ich denke du hast zusammen mit @KalmanHazins alles perfekt geklärt. Vielen Dank! –

1

Ich werde versuchen, Ihre Fragen zu beantworten, um:

  1. Wenn Sie {{#each model}} sagen, durchlaufen Sie die Posts (Array) im Modell, sodass sich jedes Mal durch die Schleife this auf den aktuellen Post bezieht. Deshalb, wenn Sie {{title}} sagen Sie wirklich {{this.title}} sagen Wenn Sie expliziter sind mit den Worten {{#each post in model}} dann jede Iteration durch die Schleife länger bezieht sich nicht auf this und stattdessen bezieht sich auf die Variable, die Sie genannt gemacht post

  2. wie in # 1 erwähnt oben bezieht sich this nicht mehr auf jede einzelne Iteration. Ich verstehe, wie Sie denken, dass vielleicht this (neben post) vielleicht noch in der Lage wäre, bequem zu sein, aber denken Sie an das folgende Szenario. Was passiert, wenn Sie eine verschachtelte {{#each}} haben? Würde sich das implizite this auf das äußere Array oder das innere Array beziehen? Wenn Sie wirklich nicht das Gefühl, wie die zusätzliche post. eingeben können Sie immer die {{#with post}} Lenker Helfer, der post zurück zu this Tive Siehe das folgende Beispiel here

  3. Wenn Sie eine Eigenschaft in Ihrem Modell oder Controller haben, können Sie absolut Schleife durch diese Eigenschaft wie in {{#each color in colors}} Siehe here für ein funktionierendes Beispiel

  4. Schließlich sollte die link-to{{#link-to 'post' post}} sein