ember.js - 使用 isVisible ember 逻辑或在 CSS 级别移动此逻辑

Question

有人能指出哪些特定用例正在使用 becomeVisible 和 becomeHidden 事件吗？

我有一个案例，我想根据特定状态隐藏/显示视图，并且想知道我是否应该通过 classNames 在 CSS 级别移动此逻辑或使用 isVisible Ember Logic。

下面的示例试图显示当前场景。

Em.ContainerView.extend({

  childViews: ['image','spinner'],
  isLoading: true,

  image: Em.View.extend({
    classNames: ['product_image'],
    classNameBindings: ['isLoading'],
    isLoadingBinding: Em.Binding.oneWay('parentView.isLoading')

  }),

  spinner: Em.View.extend({
    classNames: ['spinner'],
    classNameBindings: ['isLoading'],
    isLoadingBinding: Em.Binding.oneWay('parentView.isLoading')
  })

}) 

CSS 会是这样的：

    > .product_image {
      display:block;
    }

    > .product_image.is-loading {
      display:none;
    }

    > .spinner {
      display:none;
    }

    > .spinner.is-loading {
      display:block;
    }

任何关于这两种情况的优点/缺点的建议/评论都将不胜感激。

Answer 1

我会在视图模板中这样做：

{{#unless content.isLoaded }}
  <div class='product_image is-loading'>....</div>
{{/unless }}
{{#if content.isLoaded }}
  <div class='product_image'>...</div>
{{/if }}