Ember.js -Render eine Vorlage in einem separaten Verzeichnis mit eigenen Controllern

Question

Ich verstehe nicht den richtigen Weg, um eine Vorlage in einer anderen Vorlage zu rendern. Ich benutze ember-cli 2.4.3.

Ich habe meine route.js:

import Ember from 'ember'; 
import config from './config/environment'; 

const Router = Ember.Router.extend({ 
    location: config.locationType 
}); 

Router.map(function() { 
    this.route('index', { 
     path: '/' 
    }); 
    this.route('nodes', function() { 
     this.route('detail', { 
      path: '/:node_id' 
     } 
    }); 
    this.route('widgets', function() { 
     this.route('node_list'); 
    }); 
}); 

export default Router; 

Ich habe meine Steckdose in meinem index.js:

<!-- app/templates/index.hbs --> 
{{outlet node_list}} 

Bisher das ist, was ich in meinem index.js Route haben:

Und mein Controller, den ich versuche zu referenzieren, ist um , aber ich bin nicht sicher, ob das richtig ist. Das einzige, was ich in meinen Steuerelementen habe, betrifft das Erstellen, Löschen und Zerstören von Knoten, wobei ich eigentlich nur versuche, eine Knotenliste zu erhalten. Es wäre an den Knotenmodellen basieren, die in einem separaten ember Projektbibliothek ist, die durch die nodes.js Route zugegriffen wird:

// app/routes/nodes.js 
import Ember from 'ember'; 
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; 

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    store: Ember.inject.service(), 
    session: Ember.inject.service(), 
    model() { 
     let user = this.modelFor('application'); 
     if (user) { 
      return user.get('nodes'); 
     } else { 
      return this.get('store').findRecord('user', 'me').then(user => user.get('nodes')); 
     } 
    } 
}); 

Ich habe eigentlich mehr in index.js Weg, aber alles, was ich bin versucht zu Do rendert meine Vorlage im Verzeichnis app/widgets/node_list.hbs. Ich bin verwirrt, wo renderTemplate eigentlich sein soll (welche Route), und die richtige Weise, um mein Widget im Index angezeigt zu bekommen. Im Moment bekomme ich keinen Inhalt zum Rendern, aber die Routen werden im Ember Inspector angezeigt. Ich plane, dem Index mehrere weitere Widgets hinzuzufügen, aber ich möchte, dass mir jemand hilft, die richtige Methode zum Weiterleiten und Rendern dieser "Widget" -Templates in eine andere Vorlage zu verstehen. Danke im Voraus!

Answer 1

Nun, das ist das Beste, was ich in Bezug auf diese gefunden haben:

// router.js: 
import Ember from 'ember'; 
import config from './config/environment'; 

const Router = Ember.Router.extend({ 
    location: config.locationType 
}); 

Router.map(function() { 
    this.route('index', { 
     path: '/' 
    }); 
    this.route('nodes', function() { 
     this.route('detail', { 
      path: '/:node_id' 
     } 
    }); 
}); 

export default Router; 

// app/routes/index.js 
import Ember from 'ember'; 
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; 

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    store: Ember.inject.service(), 
    session: Ember.inject.service(), 
    model() { 
     let user = this.modelFor('application'); 
     if (user) { 
      return user.get('nodes'); // Fetch from `/users/me/nodes/` 
     } else { 
      return this.get('store').findRecord('user', 'me').then(user => user.get('nodes')); 
     } 
    }, 
    renderTemplate: function() { 
     this.render(); 
     this.render('widgets/project_list', { 
      into: 'index', 
      outlet: 'node_list' 
     }); 
    } 
}); 

ich nicht die Modelle von meiner app/routes/nodes.js Datei auf diese Weise verwenden und im Grunde die auf diese Weise Modelle zweimal in meiner Anwendung zu setzen. Soweit ich gefunden habe, gibt es keine Möglichkeit, die Modelle von node.js zu bekommen, weil sie kein Elternteil des Indexes sind. Also muss ich das Modell im Index einstellen, damit dies funktioniert. Ich kann auch nicht auf meine nodes/index.js Controller auf diese Weise zugreifen, wenn ich entweder var controller = this.controllerFor('nodes/index');, dann controller: controller in der renderTemplate() Funktion verwenden. Das bedeutet, dass ich meine Aktionen auf einen separaten Controller verschieben muss (was wahrscheinlich der richtige Weg ist), um auf sie in meinem Widget zuzugreifen. Aber ich möchte, dass auf dieselben Aktionen auch für andere Routen zugegriffen wird, und ich möchte keine Dubletten in meiner gesamten App.

Ich denke, der beste Weg, dies tatsächlich zu tun ist, meine Widgets als Komponenten zu erstellen, anstatt zu versuchen, separate Vorlagen für jedes Widget zu erstellen und sie dann in der Indexvorlage zu rendern. Ich werde das stattdessen versuchen.