2013-11-26 11 views
5

Ich arbeite an einer ember.js (Version 1.2) basierten mobilen Anwendung und ich versuche, die idiomatische Art und Weise der Implementierung des globalen Menüs Toggle/Back-Button-Muster zu finden ist in vielen mobilen Apps üblich. Insbesondere ist es eine Schaltfläche, die auf der linken Seite einer feststehenden Symbolleiste angeordnet ist, die ein verstecktes Hauptfachmenü umschaltet, wenn sich der Benutzer in der Home-/Indexansicht der App befindet. Wenn Sie jedoch auf eine Unterroute wechseln, wird auf der Schaltfläche eine Rückseite angezeigt Pfeil, und wenn er angeklickt wird, bringt er den Benutzer zurück zu der zuvor angesehenen Route (oder zurück zu der Indexroute, wenn es keine vorherigen Verlaufszustände gibt, dh wenn der Benutzer direkt nach dem Laden der App auf eine Unterroute kam).Implementierung einer "bedingten" Zurück-Taste in ember.js

Fyi, zur Zeit habe ich meine App strukturiert mit der festen oberen Symbolleiste und Menü toggle/Zurück-Taste in der Stammanwendung Vorlage. Im Idealfall würde diese Funktionalität funktionieren, unabhängig davon, wie eine Route zu einer Route umgestellt wird, sei es über transitionTo() oder {{#link-to}} Helfer, ect.

Also im Grunde möchte ich wissen, ob Ember intern jede Art von zugänglichen Verlauf/Protokoll von welchen Routen im Laufe der App Lebenszeit Übergang hatte, und was wäre der beste Weg, um die Aktion, die die Toggle/Back-Taste führt und seine Anzeige (bekannt als sein Symbol) abhängig von der aktuellen Route. Und/oder gibt es eine Möglichkeit, die Routenänderungsereignisse von ember zu hören, damit ich diese Geschichte selbst implementieren kann, wenn es nötig ist?

Antwort

11

Ich hasse es, der Überbringer schlechter Nachrichten zu sein, aber ich hasse es auch, dich hängen zu lassen.

Ember verfolgt die Geschichte nicht, es gibt keinen allgemeinen Anwendungsfall (vor allem, weil der Browser es für Sie verfolgt).

Glücklicherweise können Sie Routenänderungen im Anwendungs-Controller überwachen, etwas wie das sollte Sie beginnen (Hinweis Ich verbrachte keine Zeit erarbeiten eine tolle Lösung, die perfekt funktioniert, zeigte Ihnen nur die Grundlagen, die Sie dafür brauchen, ich ‚ll können Sie den Workflow herauszufinden, die gut für Sie arbeitet)

http://emberjs.jsbin.com/IZAZemEP/1/edit

App.ApplicationController = Em.Controller.extend({ 
    history: [], 

    hasHistory: function(){ 
    return this.get('history.length')>1; 
    }.property('history.length'), 

    watchHistory: function(){ 
    this.get('history').pushObject(this.get('currentPath')); 
    }.observes('currentPath'), 

    actions: { 
    goBack: function(){ 
     // implement your own history popping that actually works ;) 
     if(this.get('hasHistory')){ 
     this.get('history').popObject(); 
     window.history.back(); 
     this.get('history').popObject(); // get rid of route change here, don't need it 
     } 
    } 
    } 
}); 
+0

Ja, ich war ziemlich sicher, dass Ember nicht wie hatte alles, was built-in, da ich nicht finden konnten, Erwähnen Sie es irgendwo in den Leitfäden oder API-Dokumentation, wollte aber nur sicher gehen, bevor ich mit der Implementierung etwas dafür m vorangegangen bin selbst. Ihr Beispiel sollte hierfür ein perfekter Ausgangspunkt sein, vielen Dank! –

+4

In der Aktion goBack würde ich hinzufügen, wenn (!! this.get ('hasHistory')) {} else {// Übergang zu Index} um zu vermeiden, jemanden aus der App zu treten – ndreckshage