trì hoãn cắt bỏ một cái nhìn để nó có thể được hoạt hình

Question

Nói rằng tôi có một mẫu mà hiển thị một cái nhìn dựa trên một tài sản:

{{#if App.contentsAreVisible}} 
    {{view ToggleContents}} 
{{/if}} 

Khu vực này được chuyển bằng bất kỳ số lượng các phần khác của giao diện người dùng bằng cách thiết lập App.set("contentsAreVisible", [true/false]);

Tất cả đều hoạt động tốt.

Tuy nhiên, bây giờ tôi muốn tạo hoạt ảnh khi chế độ xem được bật. Hooking vào didInsertElement hoạt động để tạo hiệu ứng hiển thị khu vực, nhưng tôi không thể làm tương tự trong willDestroyElement vì phần tử bị xóa ngay khi hàm đó trả về, trước khi hoạt ảnh có cơ hội chạy.

App.ToggleContents = Ember.View.extend({ 

    // this works fine 
    didInsertElement: function(){ 
     this.$().hide().show("slow"); 
    }, 

    // this doesn't work 
    willDestroyElement: function(){ 
     this.$().hide("slow", function(){ 
      // animation is complete, notify that the element can be removed 
     }); 
    } 
}); 

Có cách nào để yêu cầu xem loại bỏ yếu tố khỏi DOM cho đến khi hoạt ảnh hoàn tất không?

Dưới đây là một fiddle với một ví dụ tương tác: http://jsfiddle.net/rlivsey/RxxPU/

Answer 1

Bạn có thể tạo một hàm hide trên tầm nhìn của bạn mà loại bỏ các quan điểm khi gọi lại xong, thấy http://jsfiddle.net/7EuSC/

tay lái:

<script type="text/x-handlebars" data-template-name="tmpl" > 
    <button {{action "hide" }}>hide</button> 

    This is my test view which is faded in and out 
</script>​ 

JavaScript:

Ember.View.create({ 
    templateName: 'tmpl', 

    didInsertElement: function() { 
     this.$().hide().show("slow"); 
    }, 

    _hideViewChanged: function() { 
     if (this.get('hideView')) { 
      this.hide(); 
     } 
    }.observes('hideView'), 

    hide: function() { 
     var that = this; 
     this.$().hide("slow", function() { 
      that.remove(); 
     }); 
    } 
}).append();​ 

Answer 2

Tôi biết điều này đã có câu trả lời đúng, nhưng tôi nghĩ tôi sẽ bật một thứ tương tự trong trường hợp bất kỳ ai khác tìm thấy thông qua Google như tôi đã làm.

Một trong các ứng dụng của tôi có phần 'chi tiết' luôn có cùng nội dung ràng buộc nhưng thay đổi mẫu cho chế độ xem/chỉnh sửa/v.v.

Vì tôi đang sử dụng hàm rerender() để đạt được điều này và muốn chế độ xem mờ dần sau đó lại để nó ẩn đi bất kỳ sự cố nào của hàm khởi đầu lại (cũng như làm cho nó trông đẹp). mục đích hoạt hình.

<script> 
_templateChanged: function(){ 
    self = this; 
    $('#effects-wrapper').fadeOut('fast',function(){ 
    self.rerender(); 
    $(this).fadeIn('fast'); 
    });    
}.observes('template') 
</script> 

và

<div id="effects-wrapper"> 
{{App.Views.Whatever}} 
</div> 

Có lẽ không phải là lựa chọn tốt nhất, nhưng cũng có lẽ hữu ích cho người