Question

我已经为应用程序模块创建了标签，其中包含大量要呈现的html标记。每次用户更改子模块时都会呈现路径视图。

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

我想，用户会在这些标签之间切换很多。在这种情况下，我想继续在DOM中。我的意思是隐藏和显示此特定模块中的过渡而不是从dom和rerender中删除。当您更换工作表时，它就像谷歌电子表格一样。第一次加载然后立即切换。

我通过

来隐藏过渡时的渲染视图

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

但是如何显示隐藏的视图而不是重新渲染？我应该修改某种渲染方法吗？

Answer 1

您可能希望使用Ember queryParams而不是使用路由来实施有状态选项卡，因为正常的路由转换将导致module路由下的视图被拆除。 Ember queryParams已经有一段时间处于测试版和Ember版本的Ember版本，并且刚刚登陆10天前的官方Ember v1.7.0版本。

有关使用queryParams实施标签的良好示例/解决方案，我建议您查看ic-tabs或Ember component project以获取一些好的示例。

如果您的选项卡包含复杂视图并需要单独的控制器，则可以使用render帮助程序来实现此目的：

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

Ember将在`module / 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}}

Answer 2

您应该覆盖createElement方法，并检查元素是否已存在且已隐藏。

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

如何保持特定视图的余烬呈现？

2 个答案: