Wie übergeben Sie Modelle an die Ember.js-Ansicht / Anwendungsvorlage?

Question

Ich versuche, die Navigation meiner App dynamisch auf der Grundlage von Modelldaten aufzubauen.

In meinem application-Template füge ich eine Ansicht für die Navigation ein:

  Meine App
  {{view App.NavView}}

Hier ist App.NavView:

App.NavView = Ember.View.extend({
  templateName: 'nav'
});

Und das nav-Template:

  {{#each contentTypes}}
    {{name}}
  {{/each}}

Wie Sie sehen können, möchte ich über contentTypes iterieren und den name jedes einzelnen anzeigen. Das Abrufen dieser Ember Data-Modelle ist einfach:

App.ContentType.find()

Aber wo soll ich diesen Aufruf platzieren, damit mein NavView/nav-Template auf das Array der Modelle zugreifen kann? Soll NavView den Aufruf machen? Oder mache ich sie im Application-Template verfügbar? Wie?

Vielen Dank für Ihre Hilfe!

Answer 1

Sie können dies mit dem {{render}} Helper tun. Sie können entweder Standards verwenden, die der entsprechende Controller bereitstellen würde, oder ein Modell zusammen mit dem Kontext übergeben.

{{render}} ist ähnlich wie {{outlet}}, aber Sie geben den Kontext vor.

Die Markup-Änderungen lauten wie folgt:

Meine App
{{render 'contentTypes'}}

Und ich habe eine entsprechende contentTypes-Vorlage hinzugefügt

<ul class="nav">
  {{#each contentTypes}}
    <li><a href="#">{{name}}</a></li>
  {{/each}}
</ul>

Hier ist ein Jsbin-Beispiel mit den contentTypes, die auf einem ContentTypesController fest codiert sind. Ihre Implementierung würde die contentTypes über das Modell erhalten.

Answer 2

Sie können den Kontext zur gerenderten Ansicht in ein Zielauslass mit dem {{#link-to}} Helper in Ihrem {{#each}} Block übergeben, wie folgt:

<ul class="nav">
  {{#each contentTypes}}
    <li>{{#link-to "routeName" this}}{{name}}{{/link-to}}</li>
  {{/each}}
</ul>