Erstellen von Links programmgesteuert in einer EmberJS-Ansicht

Question

Ich habe eine ziemlich komplexe Ansicht zu rendern, die eine Art von Rekursion beinhaltet (die typische Ordner/Datei verschachtelte Liste). Die Tatsache, dass es heterogene Objekte (Ordner und Dateien) enthält, macht es noch schwieriger, Lenkervorlagen zu schreiben.

Daher ist die einzige Lösung, die ich gefunden habe, eine Ansicht zu erstellen und den Render-Puffer manuell zu füllen. Ich kam mit der folgenden Lösung:

App.LibraryContentList = Ember.View.extend({ 
    tagName: 'ol', 
    classNames: ['project-list', 'dd-list'], 

    nameChanged: function() { 
    this.rerender(); 
    }.observes('content.@each.name'), 

    render: function(buffer) { 
    // We only start with depth of zero 
    var content = this.get('content').filterProperty('depth', 0); 

    content.forEach(function(item) { 
     this.renderItem(buffer, item); 
    }, this); 
    }, 

    renderItem: function(buffer, item) { 
    switch (item.constructor.toString()) { 
     case 'App.Folder': 
     this.renderFolder(buffer, item); 
     break; 
     case 'App.File': 
     this.renderFile(buffer, item); 
     break; 
    } 
    }, 

    renderFolder: function(buffer, folder) { 
    buffer.push('<li class="folder dd-item">'); 
    buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>'); 

    // Merge sub folders and files, and sort them by sort order 
    var content = this.mergeAndSort(); 

    if (content.get('length') > 0) { 
     buffer.push('<ol>'); 

     content.forEach(function(item) { 
     this.renderItem(buffer, item); 
     }, this); 

     buffer.push('</ol>'); 
    } 

    buffer.push('</li>'); 
    }, 

    renderFile: function(buffer, album) { 
    buffer.push('<li class="album dd-item">'); 
    buffer.push('<span class="dd-handle">' + file.get('name') + '</span>'); 
    buffer.push('</li>'); 
    } 
}); 

Nun, was würde Ich mag in der Lage sein Links hinzufügen, so dass jeder Ordner und jede Datei anklickbar ist und auf eine andere Strecke umgeleitet werden. Aber wie soll ich das machen, da ich keinen Zugriff auf den linkTo Helfer habe? Ich habe versucht, mit der LinkView-Ansicht zu spielen, aber ohne Erfolg. Sollte ich Handler manuell für jeden Artikel registrieren?

Ich habe auch darüber nachgedacht, das mit einer CollectionView stattdessen zu brechen, und den Inhalt nach Tiefe aufzuteilen, so dass ich es mithilfe von Vorlagen rendern könnte, aber es scheint komplizierter.

Irgendwelche Gedanken?

Answer 1

Es kommt mir vor, dass die linkTo Helfer möglicherweise nicht der beste Weg, um dies zu nähern. Alle linkTo ist router.transitionTo, dynamisch auflösende Pfade nach Bedarf plus die automatische active CSS-Eigenschaft Setup.

In Ihrem Fall haben Sie bereits die Elementeliste und damit das angeklickte Element in der Ansicht selbst verfügbar. Es kann also nicht notwendig sein, einen LinkView dynamisch oder implizit über den {{#linkTo}} Helfer zu erstellen, um das angeklickte Objekt zu bearbeiten.

Ich würde old-skool data-some-id direkt auf dem generierten Element Anker einrichten. Dann in der Ansicht den Klick behandeln, berechnen, welcher Artikel es mit dataset.someId und dann transitionToRoute zu diesem Artikel, entweder direkt in der Ansicht oder über eine gotoItem auf dem Controller entspricht.

Wenn es viele solche Elemente gibt, hätte dies erhebliche Einsparungen bei der Anzahl der DOM-Elemente und der Ember-Ansichten.

Ich versuchte dies mit einem ähnlichen Setup in diesem jsbin. Ich habe eine ProductsListView mit einer Vorlage verwendet, aber der Ansatz wäre ähnlich wie in Ihrem Beispiel mit einer programmatischen View.