Verständnis von Ember Views

8

Ich bin auf der Suche nach Erklärungen zu Ansichten in Ember.js

Ich komme aus einem Schienenhintergrund und versuche, Vorurteile zu ignorieren. Soweit ich das Ember-Framework verstehe, gibt es 5 Komponenten:

  • Routen: Hier definieren wir den Status der Anwendung. Der Status wird in der URL angezeigt. Wir können hier auch das Laden von Daten definieren. Route-Klassen werden definiert und beim Start erstellt ember Routenobjekte, die für die Dauer der Anwendung bestehen.
  • Modelle: Hier werden Objektdaten definiert. Kann auch berechnete Eigenschaften definieren. Ein Modellobjekt wird für jedes json-Objekt erstellt, das vom Server zurückgegeben wird.
  • Controller: Dies vermittelt Interaktionen zwischen den Modellen und Vorlagen / Ansichten. Controller-Klassen werden definiert und beim Start erstellt ember Controller-Objekte, die für die Dauer der Anwendung bestehen. Es gibt nur eine einzige Instanz jeder Controller-Klasse.
  • Vorlagen: Diese beschreiben das generierte Markup.
  • Ansichten: Dies sind spezifische Vorlagen oder dom-Elemente, die sich auf ein Modell beziehen. Diese werden verwendet, um Schnittstellenereignisse zu definieren und sie zur Behandlung an die Steuerung zu senden. Nicht sicher, wann diese erstellt werden sollen.

Als Beispiel nehmen wir an, ich habe einen EventsController, der Daten in die applicationRoute geladen hat:

%Vor%

Jetzt in meiner Vorlage, anstatt über jedes zu iterieren und die Informationen anzuzeigen, die ich über jedes Iterieren und eine verknüpfte Ansicht erstellen möchte, damit ich Interaktionen zu jedem Ereignis hinzufügen kann. Ich nehme an, ich müsste für jedes Ereignis eine neue Ansicht erstellen und in meiner Vorlage anzeigen lassen. Ich bin mir jedoch nicht sicher, wo ich diese Ansichten erstelle. Definiere ich eine View-Klasse und dann erstellt Ember jedes Mal ein neues View-Objekt, wenn ich es über den View-Helper anrufe. Schließlich möchte ich das appendTo auf der Ansicht verwenden, um meine Ereignisse an verschiedenen Orten in der Dom zu injizieren. Wo würde das definiert werden?

Ich habe versucht, den ember.js-Leitfaden für Ansichten zu lesen, aber er beschreibt den Kontext, in dem eine einzelne Ansicht erstellt wird. Ich denke, ich möchte für jedes Ereignis viele Ansichten erstellen und dann dynamisch mit diesen Objekten interagieren.

Bisher war ember unglaublich clever, also würde ich annehmen, dass es eine eingebaute Methode zum Erzeugen dieser Ansichten gibt. Schließlich sind die meisten Benutzeroberflächen voll von Listen, die Interaktionen erfordern. Das Problem ist die Liste, die ich versuche zu machen, die ich dann über das dom verteilen möchte, abhängig von seinen Attributen.

    
Matthew Sumner 28.02.2013, 18:21
quelle

1 Antwort

7

Gemäß Ihrem Code hat App.EventsController eine Liste von Ereignissen. Sagen wir nun, wir möchten, dass die Benutzeroberfläche eine Liste von Ereignissen anzeigt und für jedes Ereignis sagen wir, dass die Ansicht eine Löschschaltfläche haben soll, die das Ereignis löscht wenn der Benutzer auf

klickt

Eine Möglichkeit ist die Verwendung von Ember.CollectionView . Die Sammlungsansicht, wie der Name sagt, ist auf diese Art von Anforderungen zugeschnitten. In vielen Ember-Beispielen ist die Verwendung von view nicht definiert, da ember sie automatisch für Sie generiert In einigen Fällen müssen wir möglicherweise explizit eine Ansicht definieren, um unsere Anforderungen zu erfüllen.

%Vor%

Wichtiger Hinweis Innerhalb der CollectionView Definition verweist this.get("content") auf das Array von Ereignissen, während sich in itemViewClass this.get("content") auf die Single bezieht Ereignisobjekt

%Vor%

Nun, wenn Sie Ihre application_url / events getroffen haben Du wirst eine Liste von Ereignissen haben, jedes Ereignis hat eine Schaltfläche zum Löschen, ich hoffe, das löscht einige Konzepte

Weitere Informationen zu CollectionView

Aktualisieren Sie gemäß dem Kommentar:

Wenn Sie an jede untergeordnete Ansicht eine weitere Ansicht anhängen möchten, können Sie dies tun, indem Sie die Vorlage der itemViewClass wie folgt bearbeiten

%Vor%

es kann auch ein Teil sein wie folgt

%Vor%

oder wenn Sie es programmgesteuert sagen möchten, klicken Sie auf eine Schaltfläche in der EventsView-Vorlage und beim Klicken auf alle Childs-Ansicht muss ein Span-Tag angehängt werden (ich bin sehr schlecht bei der Angabe von Beispielen)

%Vor%

appendSpan ist in der CollectionView definiert

    
Mudassir Ali 28.02.2013, 19:21
quelle