使用isVisible燼邏輯或在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 }}