如何保持特定的視圖ember呈現？

我已經爲應用程序模塊創建了具有相當數量的html標記來呈現的選項卡。每當用戶更改子模塊時，都會呈現路徑的視圖。如何保持特定的視圖ember呈現？

example.com/module/tab 
example.com/module/other-tab 
example.com/module/different-tab

用戶打算在這些標籤之間切換很多，我想。在這種情況下，我想保持在DOM中。我的意思是隱藏和顯示這個特定模塊中的轉換，而不是從dom和rerender中移除。這就像谷歌電子表格，當你改變工作表。第一次加載，然後立即切換。

我manged通過

App.ModuleTab = Ember.View.extend 
    destroy: -> 
     @.$().hide().addClass('module-tab')

但躲過渡渲染視圖我怎麼能顯示隱藏的視圖，而不是重新描繪？我應該修改某種方式渲染方法？

來源

2014-08-30 Mateusz Nowak

重新描繪並以某種方式恢復之間的差/取消隱藏現有DOM很可能是小於100毫秒的數量級上。如果你真的關心這個，那麼@Andrew Hacking的答案是正確的。 – 2014-09-02 14:29:54

你可能會想實現使用灰燼queryParams而不是使用路由作爲正常路線過渡將導致您的module路線下的意見被拆掉狀態的標籤。 Ember queryParams已經在Ember的測試版和金絲雀版本中出現了一段時間，並且剛剛在10天前登陸官方Ember v1.7.0版本。

對於使用queryParams來實現製表符的一個很好的示例/解決方案，我會建議您在ic-tabs或Ember component project中查看一些很好的示例。

如果你的標籤包含複雜的觀點和需要單獨的控制器，你可以通過使用render助手爲每個標籤的內容做到這一點：

{{render 'module/tab-xx'}}

灰燼將尋找一個模板模塊中的`/ tab-xx'和一個名爲ModuleTabXXController的控制器，它將實例化並綁定視圖。請參閱Ember guides on rendering views with helpers

如果您只想在選項卡可見時進行渲染，則可以進一步條件化渲染。例如：

{{#ic-tabs selected-index=country}} 
    {{#ic-tab-list}} 
     {{#ic-tab}}Australia{{/ic-tab}} 
     {{#ic-tab}}United Kingdom{{/ic-tab}} 
     {{#ic-tab}}USA{{/ic-tab}} 
    {{/ic-tab-list}} 

    {{#ic-tab-panel}} 
     {{#if active}} 
     {{render 'country/au' auModel}} 
     {{/if}} 
    {{/ic-tab-panel}} 

    {{#ic-tab-panel}} 
     {{#if active}} 
     {{render 'country/uk' ukModel}} 
     {{/if}} 
    {{/ic-tab-panel}} 

    {{#ic-tab-panel}} 
     {{#if active}} 
     {{render 'country/us' usModel}} 
     {{/if}} 
    {{/ic-tab-panel}} 

    {{/ic-tabs}}

來源

2014-09-02 14:03:48

我會在幾分鐘內檢查'queryParams'，但事先我有一個問題。我是否必須一次渲染所有模塊？他們每個人都呈現大約1秒，所以我強烈不喜歡同時呈現多個模塊的想法。此外，我想保持我的代碼邏輯結構。一個大型控制器不是最佳選擇。 – 2014-09-02 15:00:45

更新答案以解決其他要求。 – 2014-09-03 08:06:20

-1

您應該重寫createElement方法，並檢查元素是否已經存在並隱藏。

App.ModuleTab = Ember.View.extend 
    createElement: -> 
    if @get 'element' 
     @.$().show() 
     @ 
    else @._super.createElement() 
    destroy: -> 
    @.$().hide().addClass('module-tab')

來源

2014-09-01 14:47:08 user3995789

它不工作。 Ember爲dom增添了新的元素，並保持老舊。 – 2014-09-01 14:55:21

@estshy哦，好吧，你不能用Ember.View來做，因爲當調用destroy的時候，Ember.View實例不見了。所以，當一個新的視圖被渲染時，一個新的Ember.View實例被創建，它不知道舊的視圖，所以如果你真的想破解，可以使用'$（'module-tab-and-other-specific-selector-for舊標籤'）而不是'@get'element''。希望你能明白我的想法。 – user3995789 2014-09-01 14:58:39

即使有唯一的選擇符，如果$（'＃some-unique-id'）。'length'仍然是重新渲染視圖。 – 2014-09-01 15:03:45

如何保持特定的視圖ember呈現？

回答

相關問題