Ich muss eine "aktive" Klasse auf eine Bootstrap-Registerkarte abhängig vom aktuellen Routennamen anwenden. Das Routenobjekt enthält "routeName", aber wie kann ich von einem Controller oder einer Komponente darauf zugreifen?Zugriff auf den aktuellen Routennamen von einer Steuerung oder Komponente aus
für Ember 2, von einem Controller führen Sie ausprobieren können:
appController: Ember.inject.controller('application'),
currentRouteName: Ember.computed.reads('appController.currentRouteName')
Dann können Sie es an die Komponente übergeben.
Im absolut verzweifelten Fall können Sie den Router oder den Anwendungscontroller (der die Eigenschaft 'currentRouteName' freigibt) über this.container.lookup("router:main") oder this.container.lookup("controller:application") von der Komponente aus nachschlagen.
Wenn es ein allgemeiner Trend für mich war, würde ich einen CurrentRouteService machen und ihn in meine Komponente (n) injizieren, so dass ich in meinen Tests die Dinge leichter verhöhnen kann.
Es kann auch eine bessere Antwort geben - aber der container.lookup() sollte Ihren aktuellen Blocker umwerfen.
Es gibt undefined für mich zurück: 'this.container.lookup (" router: main ").get ('currentRouteName') ' – jax
verwenden this.controllerFor('application').get('currentRouteName');
Funktioniert das von einer Komponente? – Huafu
@Huafu Es sollte in Ember 1 funktionieren. Ich bin mir über Glut 2 nicht sicher. Ich habe seit einiger Zeit nicht mehr in Glut gearbeitet. Aber ich denke, es wird nicht mehr, seit Controller ersetzt werden, zugunsten von routingfähigen Komponenten in Ember 2. Ich bin nicht einmal sicher, dass sie sich in diese Richtung bewegt haben. Aber es wäre toll, wenn du hier updaten könntest, wenn du eine Alternative findest. – blessenm
Nein, ich meinte, 'controllerFor' ist eine öffentliche Methode von' Ember.Route', in Ember2 ist es auch eine private statische Methode von 'Ember', aber ich denke nicht, dass es eine Methode von' Ember.Component ist ', sogar privat. Mit anderen Worten, dies würde von einer Route, aber nicht von einer Komponente funktionieren, da "ControllerFor" dort nicht verfügbar ist. – Huafu
bereits.
export default Ember.Route.extend({
routeName: null,
beforeModel(transition){
//alert(JSON.stringify(transition.targetName) + 'typeof' + typeof transition.targetName);
this.set('routeName', transition.targetName);
},
model(){
// write your logic here to determine which one to set 'active' or pass the routeName to controller or component
}`
In der Tat, müssen Sie nicht selbst aktiv Klasse anzuwenden. Ein link-to Helfer wird es für Sie tun.
Siehe here:
{{link-to}}wird einen CSS-Klasse Namen ‚aktiv‘ gelten, wenn die aktuelle Route mit der mitgelieferten Route entspricht der Anwendung. Wenn zum Beispiel die aktuelle Route der Anwendung ist 'photoGallery.recent' die folgende Verwendung von{{link-to}}:
{{#link-to 'photoGallery.recent'}}
Great Hamster Photos
{{/link-to}}
in
<a href="/hamster-photos/this-week" class="active">
Great Hamster Photos
</a>
Eine so große Verwendung von 'link-to'! –
Mit den Erkenntnissen von @ maharaja-santhirs Antwort kann man sich vorstellen, die Eigenschaft routeName auf dem Ziel-Controller zu setzen, der beispielsweise in der Vorlage des Ziels verwendet werden soll. Auf diese Weise ist es nicht erforderlich, die Logik an mehreren Standorten zu definieren und damit die Wiederverwendbarkeit von Code zu gewährleisten. Hier ist ein Beispiel dafür, wie das erreichen:
// app/routes/application.js
export default Ember.Route.extend({
...
actions: {
willTransition(transition) {
let targetController = this.controllerFor(transition.targetName);
set(targetController, 'currentRouteName', transition.targetName);
return true;
}
}
});
Definition diese willTransition Aktion in der Anwendung Route ermöglicht Ausbreiten den aktuellen Routennamen überall in der Anwendung. Beachten Sie, dass der Zielcontroller die Eigenschaftseinstellung currentRouteName behält, auch wenn er zu einer anderen Route navigiert. Dies erfordert bei Bedarf eine manuelle Bereinigung, die je nach Implementierung und Anwendungsfall jedoch akzeptabel sein kann.
Möge dies this.controllerFor ('application'). Get ('currentRouteName') – blessenm
@blesmenm yep, das ist ziemlich genau das, was ich will – jax
ember wird dies für Sie tun. benutze einfach link-to auf deinen Tabs – killebytes