2014-01-29 104 views
5

在使用Durandal構建的單頁應用程序中,我有一個設置視圖和不同的部分。我使用childRouter來解析不同的部分。使用兒童路由器時的Durandal路由器/生命週期事件

在這個應用程序中,大量的代碼掛鉤到Durandal使用的組合生命週期事件中。例如,該自定義綁定:

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; 
     }); 
    } 
}; 

此自定義綁定已完全發揮作用到目前爲止,焦點設置施加時顯示的視圖時的結合領域。

但是,對於子路由器,時間是關閉的。看起來,當加載「設置」視圖時,主路由器觸發'router:navigation:composition-complete'事件。此時,子視圖尚未顯示,具有自動聚焦綁定的元素不會獲得焦點。在設置頁面之間導航時,這更加清晰:在離開頁面時,舊的子視圖上的自動聚焦綁定字段獲得焦點,然後顯示新的子視圖而沒有聚焦的元素。

是否有任何方法讓子路由器也忽略事件?或者可能讓主路由器推遲事件直到子路由器完成?

我也讀過,這也適用於組成的其他階段:在子視圖的視圖模型上不會調用停用回調。因此,在子路由器上進行事件觸發的一般修復將是我正在尋找的理想解決方案。

在此先感謝。

+0

奇怪的是我使用的是子路由器在那裏,如果我有一個canDeactivate回調,孩子路由器實際變化,但主路由器取消導航,當我返回false從當看到同樣的問題canDeactivate,因此主路由器和子路由器不再同步。 :)我不知道這是否與您所看到的相似,但如果我找到修復,我會分享它。 –

回答

5

試試這個:

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; 
     }); 
    } 
};