Durandal Router/Lifecycle-Ereignisse bei Verwendung eines ChildRouter

Question

In einer einzelnen Seite App mit Durandal erstellt, habe ich eine Ansicht Einstellungen, mit verschiedenen Abschnitten. Ich verwende einen ChildRouter, um die verschiedenen Abschnitte aufzulösen.

In dieser Anwendung hängt viel Code in den Zusammensetzungslebenszyklusereignissen, die Durandal verwendet. Zum Beispiel ist dieses kundenspezifische Bindung:

ko.bindingHandlers.autoFocus = { 
    init: function (element) { 
     var $element = $(element), 
      setFocus = function() { 
       $element.focus(); 
      }; 

     router.on('router:navigation:composition-complete', setFocus); 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      router.off('router:navigation:composition-complete', setFocus); 
      $element = null; 
     }); 
    } 
}; 

Diese kundenspezifische Bindung ist perfekt so weit funktioniert, den Fokus auf das Feld Einstellung wurde die Bindung angewendet, wenn die Ansicht angezeigt wird.

Mit dem Child-Router ist das Timing jedoch deaktiviert. Es scheint, dass der Hauptrouter das Ereignis 'router:navigation:composition-complete' auslöst, wenn die Ansicht 'Einstellungen' geladen wird. Zu diesem Zeitpunkt wird die untergeordnete Ansicht noch nicht angezeigt, und das Element mit der Autofokusbindung erhält den Fokus nicht. Dies wird beim Navigieren zwischen den Einstellungsseiten noch deutlicher: Beim Verlassen einer Seite wird das Feld mit der Autofokusbindung der alten Kindansicht fokussiert, dann wird die neue Kindansicht ohne ein fokussiertes Element angezeigt.

Gibt es eine Möglichkeit, den Child-Router dazu zu bringen, auch Ereignisse wegzulassen? Oder vielleicht, um den Hauptrouter dazu zu bringen, die Ereignisse zu verschieben, bis der Kind-Router fertig ist?

Ich habe auch gelesen, dass dies auch in anderen Stadien der Zusammensetzung gilt: z.B. Der Callback deaktivieren wird im View-Modell einer Kind-View nicht aufgerufen. Daher wäre eine allgemeine Lösung für die Ereignisauslösung bei untergeordneten Routern die ideale Lösung, nach der ich suche.

Vielen Dank im Voraus.

Answer 1

Versuchen Sie folgendes:

ko.bindingHandlers.autoFocus = { 
    init: function (element) { 
     var $element = $(element), 
      setFocus = function (child, parent, context) { 
       $element.focus(); 
         if (child.router) 
          child.router.on('router:navigation:composition-complete', function() { $element.focus(); }); 
}; 
     router.on('router:navigation:composition-complete', setFocus); 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      router.off('router:navigation:composition-complete', setFocus); 
      $element = null; 
     }); 
    } 
};