2015-03-02 52 views
9

我有一個用戶鏈接顯示從各種屏幕(從用戶列表,用戶組等)。點擊鏈接後,會顯示用戶進行編輯。在編輯表單中按下取消按鈕時,我想轉換到上一個屏幕用戶列表/組。這在Emberjs中通常如何實現。Emberjs回去取消

感謝, 穆拉利

+0

您可以在其價值取決於你在哪裏到用戶路徑來的UserController中的變量。在與取消按鈕關聯的操作中,您可以使用變量的值決定要轉換回的路線。您可以使用transitionToRoute返回到較舊的路線。這有意義嗎? – 2015-03-02 17:47:15

+0

如果你有一個JSFiddle代碼,這將更容易解釋。 – 2015-03-02 17:48:51

+0

你的方法是有道理的。我認爲可能有一個更簡單的方法。它只需複製回按鈕行爲。我沒有JSFiddle,我會嘗試創建一個 – Murali 2015-03-02 18:07:01

回答

18

你需要什麼超過

history.back() 

主要設計之一Ember的目標,實際上大多數OPA框架,都是與瀏覽器的歷史堆棧協調工作,以便back「正常工作」。

所以你不需要維護你自己的迷你歷史堆棧,或全局變量或過渡鉤子。

您可以在您的應用程序路由器中放置一個動作從任何地方冒泡的動作,因此您可以在任何模板中簡單地說{{action 'back'}},而不需要任何其他模板。

+0

我提出的方法對我來說也覺得還不夠完美,所以如果@torazaburo的方法有效的話 - 隨它一起推出。 :) – Kalman 2015-03-02 19:43:05

+0

@Kalman我已經看到你的方法有幾個變種,所以你在八月份的公司。然而,我從來沒有見過一個真正有必要的案例,儘管產品/功能人物的抗議表明他們「知道」用戶「真的」想要回到神奇的地方A.另一方面,我有看到不止一種情況,在這種情況下,可憐的施洛布斯終於維持了一個半熟的自己的歷史機制,直到他們放棄並退出。 – 2015-03-02 19:59:13

+0

'Back'很好。 – Caltor 2017-03-20 14:14:48

1

有可能是一個乾燥方式(不重複自己)這件事,但這樣做的一個辦法是有2個動作:willTransition這灰燼已經給你和goBack這你定義你自己。然後,有一個「全球性」 lastRoute變量您保留如下軌跡:

App.OneRoute = Ember.Route.extend({ 
    actions: { 
    willTransition: function(transition){ 
     this.controllerFor('application').set('lastRoute', 'one'); 
    }, 
    goBack: function(){ 
     var appController = this.controllerFor('application'); 
     this.transitionTo(appController.get('lastRoute')); 
    } 
    } 
}); 

而且你的模板將如下所示:

<script type="text/x-handlebars" id='one'> 
    <h2>One</h2> 
    <div><a href='#' {{ action 'goBack' }}>Back</a></div> 
</script> 

工作實例here

2

這是我的解決方案,它非常簡單和高性能。

// file:app/routers/application.js 
 
import Ember from 'ember'; 
 

 
export default Ember.Route.extend({ 
 
    transitionHistory: [], 
 
    transitioningToBack: false, 
 

 
    actions: { 
 
    // Note that an action, like 'back', may be called from any child! Like back below, for example. 
 

 
    willTransition: function(transition) { 
 
     if (!this.get('transitioningToBack')) { 
 
     this.get('transitionHistory').push(window.location.pathname); 
 
     } 
 
     this.set('transitioningToBack', false); 
 
    }, 
 
    
 
    back: function() { 
 
     var last = this.get('transitionHistory').pop(); 
 
     last = last ? last : '/dash'; 
 
     this.set('transitioningToBack', true); 
 
     this.transitionTo(last); 
 
    } 
 
    } 
 
});