一個應用程序中的不同用戶界面/模板

有一種情況，我希望有兩種類型的界面。一個是默認的應用程序，另一個是用於登錄屏幕等一個應用程序中的不同用戶界面/模板

玩了一段時間後，全屏模式，我想我會嘗試使用應用程序模板兩個指定網點：

{{outlet main}} 

{{outlet alternative}}

然後我有一個主模板：

{{partial "wrapper"}} 

{{outlet}} 

{{partial "footer"}}

它得到通過渲染成{{outlet main}}（我用灰燼應用程序套件，所以下面就相當於App.ApplicationRoute = Ember.Route.extend（{... ）：

export default Ember.Route.extend({ 

    renderTemplate: function() { 
     this._super(); 
     this.render('master', { 
      outlet: 'main', 
      into: 'application' 
     }); 
    }, 

});

現在，問題是我想吹走主模板，並且對頁面有不同的外觀和感覺，就像全屏登錄頁面一樣，沒有包裝器/側邊欄或頁腳。

我認爲我可以在我的LoginRoute停用{{outlet main}}與disconnectOutlet，只是推新登錄模板{{outlet alternative}}像這樣：

export default Ember.Route.extend({ 

    renderTemplate: function() { 
    this.disconnectOutlet({ 
     outlet: 'main', 
     into: 'application' 
    }); 

    this.render('login', { 
     outlet: 'alternative', 
     into: 'application' 
    }); 
    }, 

});

這雖然導致{{outlet main}}仍然呈現（我想象由於ApplicationRoute - LoginRoute的renderTemplate不會覆蓋它？），並且登錄模板在它下面呈現（也就是在頁面下方/在摺疊下面）。

有誰知道如何在Ember中完成UI的完全切換？

來源

2014-02-11 aleayr

這是絕對有可能的。根據您的使用情況，如果您只想拆除某些特定路線的出口，則可以使用disconnectOutlets。但是，如果您想要比這更低級別並完全替換應用程序每個路徑使用的主模板，那麼執行起來相當容易。以this jsbin爲例。

來源

2014-02-12 19:52:59 Adam

這是完美的。在過去的幾周裏一直使用它，沒有遇到任何問題。乾杯亞當！ – aleayr

完美！你真棒@亞當。非常感謝你！ – danilodeveloper

我不知道爲什麼沒有用於創建多個應用程序模板，自己是一個選擇，但我認爲你可以實現你試圖通過讓你的應用程序模板只是呈現一個出口做什麼：

模板/ application.hbs

{{outlet}}

然後你可以使用嵌套的視圖和組件分手的一個應用：

templa TES/main.hbs

{{view 'TopNav'}} 
{{view 'Blog'}} 
{{view 'Footer'}}

模板/ alternative.hbs

{{view 'Blog'}}

來源

2014-02-11 21:37:10

感謝您的迴應Aaron！我認爲我嘗試了類似的東西，但是我認爲，當我在application.hbs中只用一個'{{outlet}}'渲染某個東西時，只要我去了不同的路徑，整個插座就被替換/重新渲染，這對我網站上99％的頁面來說似乎過分了。我想我可以在main.hbs中放置一個名爲content的命名插件，並指導大多數內容，這樣底層插件不需要覆蓋每一個路由變化？只是在特定的路線？ – aleayr

是的，你絕對不想重新渲染整個佈局每個路線的變化。回顧你使用disconnectOutlet的努力;我認爲你在變量名中有錯誤。我沒有使用disconnectOutlet，我不得不查看它究竟做了什麼。 github上的這個提交引用了函數（https://github.com/emberjs/ember.js/pull/2926），並且它看起來disconnectOutlet上的正確語法是'from'not'into'。如果這可以解決您的問題，請告訴我。 –

ember-elsewhere非常適合在正常路線層次結構之外進行折扣，建議在Ember docs。

創建目標：

{{from-elsewhere name="my-right-sidebar"}}

在別的地方在你的應用程序中，聲明其組件應在目標渲染 - 完成綁定的投入和行動：

{{to-elsewhere named="my-right-sidebar" 
    send=(component "cool-thing" 
    model=model launch=(action "launchIt"))}}

更多的例子在這裏：https://ef4.github.io/ember-elsewhere/

來源

2017-12-29 03:08:09 Rimian

一個應用程序中的不同用戶界面/模板

回答

相關問題