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 }}