odkładanie usunięcie widoku więc może być animowany

Question

że mam szablon, który wyświetla się widok w oparciu o nieruchomości:

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

Obszar ten jest przełączana przez dowolną liczbę innych częściach interfejsu użytkownika poprzez ustawienie App.set("contentsAreVisible", [true/false]);

To wszystko działa w porządku.

Jednak teraz chce animować gdy widok jest przełączana. Podpinania do didInsertElement prac animować przedstawiający obszar, ale nie mogę zrobić to samo w willDestroyElement ponieważ element jest usuwany, kiedy tylko wróci funkcyjnych przed animacja ma szansę ucieczki.

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

Czy istnieje sposób, aby powiedzieć widokowi, aby odroczyć usunięcie elementu z DOM, dopóki animacja nie zostanie ukończona?

Oto skrzypce z interaktywnym przykład: http://jsfiddle.net/rlivsey/RxxPU/

Answer 1

Można utworzyć hide funkcję w widoku, który usuwa z widoku, gdy zwrotna jest zakończona, zobacz http://jsfiddle.net/7EuSC/

Kierownica:

<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

wiem, to nie ma już właściwą odpowiedź, ale pomyślałem, że coś podobnego pop up na wypadek gdyby ktoś inny znajdzie to za pośrednictwem Google jak ja.

Jeden z moich aplikacji posiada sekcję „szczegół”, który zawsze ma tę samą treść wiążącej ale zmienia szablon przejrzeć/modyfikować/etc trybów.

Ponieważ używam rerender(), aby to osiągnąć i chcę, aby widok zaniknął, a następnie ponownie, więc ukrywa wszelkie niedogodności związane z funkcją ponownego renderowania (jak również sprawiają, że wygląda ładnie). cele animacji.

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

i

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

Być może nie jest najlepszym rozwiązaniem, ale też być może przydatne dla kogoś