In EmberJS, wie organisiert man Vorlagen innerhalb eines übergeordneten Layouts und wie definiert man ihre Routen?

Question

Ich möchte eine App haben, die zwei Hauptmodelle hat: Konto und Transaktion. Ich möchte eine Liste von Konten in einer linken Leiste haben. Wenn ich auf ein Konto klicke, möchte ich eine Liste von Transaktionen in der Mitte der Seite angezeigt bekommen. Und wenn ich auf eine Transaktion klicke, möchte ich die Details dieser Transaktion in einer rechten Leiste sehen. Und zu guter Letzt, wenn ich auf Transaktion bearbeiten klicke, möchte ich ein kleines Transaktionsformular in dieser gleichen rechten Leiste anzeigen, direkt unter den Transaktionsdetails.

Mein Problem ist, dass ich die richtigen Routen- und Vorlagennamen nicht zum Laufen bekomme. Soll ich eine große verschachtelte Router-Map wie diese machen (konnte nicht zum Laufen bringen)? Ich möchte auch gerne von Ember "partial" Gebrauch machen, um diese Transaktion zu bearbeiten.

this.resource('accounts', function(){
    this.resource('account',{ path: ':account_id' }, function(){
        this.resource('transactions', function(){
            this.resource('transaction', {path:':transaction_id'});
        });
    });
});    

Wenn ja, wie benenne ich meine Vorlagen?

    <div class="main">
        {{outlet}}
    </div>

    <div class="left-bar">
        {{#each model}}
            {{#linkTo 'transactions' this}} {{name}} {{/linkTo}}
        {{/each}}
    </div>
    <div class="right-main">
        {{outlet}}
    </div>

    <div class="center">
        {{#each model}}
            {{#linkTo 'transaction' this}} {{name}} {{/linkTo}}
        {{/each}}
    </div>
    <div class="right-bar">
        {{outlet}}
    </div>

    <div class="top-transaction-detail">
        Transaktionsbeschreibung: {{description}}<br>
        Transaktionswert: {{value}}
    </div>
    <div class="bottom-transaction-edit">
        {{partial 'transaction/edit'}}
    </div>

    <p>{{view Ember.TextField valueBinding='description'}}</p>
    <p>{{view Ember.TextField valueBinding='value'}}</p>

Außerdem, was wären meine Routen?

App.AccountsRoute = Ember.Route.extend({});
App.AccountsAccountTransactionsRoute = Ember.Route.extend({});
App.AccountsAccountTransactionsTransactionRoute = Ember.Route.extend({});
??????

Danke

Answer 1

Mein Problem ist, dass ich die richtigen Routen- und Vorlagennamen nicht zum Laufen bekomme. Soll ich eine riesige verschachtelte Router-Map wie diese machen (konnte es nicht zum Laufen bringen)?

Ja, du hast die richtige Idee. Manchmal macht diese Verschachtelungsebene keinen Sinn, aber in deinem Fall passt sie gut, da du tatsächlich diese Verschachtelungsebene in deiner Anwendungs-Benutzeroberfläche möchtest. Der einzige Unterschied ist, dass ich Konten und Transaktionen standardmäßig machen würde, indem ich den Pfad auf '/' setze.

this.resource('accounts', {path: '/'}, function(){
  this.resource('account',{ path: ':account_id' }, function(){
    this.resource('transactions', {path: '/'}, function(){
        this.resource('transaction', {path:':transaction_id'});
    });
  });
}); 

Wenn ja, wie benenne ich dann meine Vorlagen?

application.hbs
accounts.hbs
accounts/index.hbs -> Nachricht "Wähle ein Konto"
account.hbs -> Kontodetails
transactions.hbs -> Liste der Transaktionen für das Konto
transactions/index.hbs -> Nachricht "Wähle eine Transaktion"
transaction.hbs -> Transaktionsdetails
transaction/index.hbs -> Ein Bearbeiten-Button
transaction/edit.hbs -> das Bearbeitungsformular

Zumindest glaube ich, dass das richtig ist, es ist ziemlich einfach, die Benennungskonventionen durcheinander zu bringen. Wenn du unsicher bist, versuche Folgendes zu deiner Anwendungs-Konfiguration hinzuzufügen:

var App = Ember.Application.create({
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

So kannst du sehen, was Ember verwendet, und alles korrigieren, was falsch benannt wurde.

Ich möchte auch gerne Ember "partial" nutzen, um diese Transaktion zu bearbeiten.

Ich würde empfehlen, stattdessen eine andere Route zu verwenden.