Verwendung von Routing in Ext. JS 5

Ursprünglicher Autor: Mitchell Simoens
  • Übersetzung
  • Tutorial

Routing ist eine neue Funktion in Ext JS 5, mit der Sie dem Controller den Navigationsverlauf zuordnen können. Die Schaltflächen "Zurück / Vor" sind einer der Hauptteile der Browser-Oberfläche. Mit Ext JS 5 ist die Navigation in Anwendungen mit nur einer Seite sehr einfach.

Routing in Ext JS 5


In Ext JS konnten wir den Navigationsverlauf immer mit der Klasse Ext.util.History verarbeiten. In Ext JS 5 haben wir diesen Prozess jedoch noch einfacher und flexibler gestaltet. Der Router bietet eine einfache Konfiguration der Kommunikation von Hash-Tokens und Controller-Methoden mit Parameterunterstützung und Steuerung der Routenausführung ( Ext.util.History wird hinter den Kulissen verwendet ). Schauen wir uns ein einfaches Beispiel an:

    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
        routes : {
            'home' : 'onHome'
        },
        onHome : function() {}
    });


Im Routen- Objekt ist der Home- Schlüssel der Hash, und onHome ist die Methode im Controller, die ausgeführt wird, wenn darauf geklickt wird (z. B. :) localhost#home. Um den Hash im Controller zu ändern, können Sie die redirectTo- Methode verwenden :

 this.redirectTo(‘home’); //редиректит на http://localhost#home

Dies wird die Hash - URL ändern #Home , die wiederum die Methode verursachen onHome , wenn der Kontext eine Instanz des Reglers ist MyApp.controller.Main , die Route festgelegt wurde. Wenn Sie dieselbe Route in mehreren Controllern registriert haben, stimmt die Ausführungsreihenfolge mit der Reihenfolge überein, in der die Anwendungscontroller registriert sind (Array von Controllern ).

Hash-Token und Parameter


Ein Hash-Token kann Parameter enthalten, die der Router als Argumente an die Controller-Methoden übergibt. Der Hash kann wie folgt aussehen: "# user / 1234" , wobei 1234 die Benutzer-ID ist. Um diesem Hash zu entsprechen, wird der Controller wie folgt konfiguriert:

    Ext.define(‘MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
        routes : {
            'user/:id' : 'onUser'
        },
        onUser : function(id) {}
    });

Bei der Konfiguration einer Route mit Parametern wird vor dem Parameternamen ein Doppelpunkt eingefügt. In diesem Fall ist es : id . Der Router übernimmt jeden übergebenen Wert und übergibt ihn an die onUser- Methode . Die Reihenfolge der an die Methode übergebenen Argumente entspricht der Reihenfolge der in der Route definierten Parameter.

Sie können die Übereinstimmung von Hash-Parametern mit regulären Ausdrücken steuern. Im obigen Beispiel darf die ID nur Zahlen enthalten, und die übrigen Werte sollten nicht übereinstimmen. Hierfür wird die Bedingungskonfiguration verwendet :

    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
        routes : {
            'user/:id' : {
                action     : 'onUser',
                conditions : {
                    ':id' : '([0-9]+)'
                }
            }
        },
        onUser : function(id) {}
    });

Dieses Beispiel zeigt zwei Dinge: Eine Route kann ein Objekt sein, bei dem der Aktionsschlüssel die Controller-Methode ist, und Bedingungen ein Objekt mit Parametern und Zeichenfolgen für reguläre Ausdrücke. Der Grund, warum der reguläre Ausdruck in die Zeichenfolge geschrieben wird, ist, dass der Router den Hauptausdruck basierend auf den Routenparametern erstellt. Mit der Bedingungskonfiguration können Sie die regulären Standardausdrücke überschreiben. Der reguläre Standardausdruck für Zeichenfolgenparameter lautet '([% a-zA-Z0-9 \\ - \\ _ \\ s,] +)' .

Um einen Routenübergang zu behandeln, für den keine Übereinstimmungen vorliegen , ist ein nicht übereinstimmendes Ereignis vorhanden . Der Handler kann sowohl an der Anwendung als auch an der Steuerung aufgehängt werden. Zum Beispiel zu einem Controller:

    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
        listen : {
            controller : {
                '*' : {
                    unmatchedroute : 'onUnmatchedRoute'
                }
            }
        },
        onUnmatchedRoute : function(hash) {}
    });

Manchmal ist es erforderlich, einen Übergang entlang einer Route abzufangen, um ihn zu stoppen oder nach einer asynchronen Aktion fortzusetzen, z. B. einer Ajax-Anforderung. Dazu wird die Vorher- Taste in der Route verwendet . Hier ist ein Beispiel, in dem die Routenausführung nach einer Ajax-Anforderung fortgesetzt wird:

    Ext.define('Fiddle.controller.Main', {
        extend : 'Ext.app.Controller',
        routes : {
            'user/:id' : {
                action     : 'onUser',
                before     : 'beforeUser',
                conditions : {
                    ':id' : '([0-9]+)'
                }
            }
        },
        beforeUser : function(id, action) {
            Ext.Ajax.request({
                url     : '/user/confirm',
                params  : {
                    userid : id
                },
                success : function() {
                    action.resume();
                },
                failure : function() {
                    action.stop();
                }
            });
        },
        onUser : function(id) {}
    });

Das Verfahren beforeUser das Argument akzeptiert ID ähnlich der onUser sowie - die Aktion , in der es Methoden der resume und dem Anschlag , wird durch die Ausführung der Strecke gesteuert. Die action.resume () -Methode setzt die Route fort, sodass sie asynchronisiert werden kann, und action.stop () verhindert, dass sie ausgeführt wird. Wenn true an die Stoppmethode übergeben wird , werden alle Routen gestoppt.

Ext JS-Anwendungen werden immer umfangreicher und komplexer. Möglicherweise müssen mehrere Hash-Token gleichzeitig verarbeitet werden. In Ext JS 5 ist diese Funktion implementiert, während jedes Hash-Token separat in einer eigenen Sandbox verarbeitet wird. Wenn Sie also eine Route abbrechen, indem Sie true an die action.stop- Methode übergeben , werden die Routen nur mit diesem Hash-Token abgebrochen , und der Rest wird weiterhin ausgeführt. Jedes Token muss durch eine vertikale Linie geteilt werden:

    #user/1234|message/5ga

Der Router teilt den Hash auf und empfängt die Token 'user / 1234' und 'message / 5ga' . Zunächst wird das Benutzertoken verarbeitet , alle dazu passenden Routen gefunden und ausgeführt. Wenn keine mit diesem Token übereinstimmenden Routen gefunden werden, wird das Ereignis "unmatchedroute" ausgelöst . Dann wechselt der Router zum Nachrichtentoken und sucht analog nach verwandten Routen. Wenn nicht gefunden, wird das Ereignis unmatchedroute ausgelöst .

Fazit


Der neue Router in ExtJS 5 ist einfach zu konfigurieren und ermöglicht Ihnen auch die einfache Verarbeitung Ihres Browserverlaufs. Gleichzeitig bleibt er flexibel und leistungsstark, um den Anforderungen komplexer Anwendungen gerecht zu werden. Zusammen mit MVC + VM, bidirektionaler Datenbindung und anderen neuen Funktionen ist Ext JS 5 ein hervorragendes Framework für Unternehmensanwendungen.

Jetzt auch beliebt: