jqueryember.jsember.js-view

Ember.js - View fading in and out using jquery


Is it possible using the View lifecycle hooks such as:

"willDestroyElement: This hook is called immediately before the element is removed from the DOM. This is your opportunity to tear down any external state associated with the DOM node. Like didInsertElement, it is most useful for integration with external libraries."

to fade out a view using jquery by putting an id in one of the div in the handlebar template? This is my code for the template and the view. The fading out is not working.

the template:

<script type="text/x-handlebars" id="home">
  <div class="col-md-12">
    <div class="panel panel-default" id="homeview"> <----- THE ID
      <div class="panel-heading">Home</div>
      <div class="panel-body">
        <p>Welcome!</p>
      </div>
    </div>
  </div>
</script>

the Home View

App.HomeView = Ember.View.extend({
   templateName: 'home',

   willDestroyElement : function(){
      $("#homeview").fadeOut();
   }

});

Solution

  • You can access the element in a view with this.$() without using an ID: http://emberjs.com/api/classes/Ember.View.html#method__

    Although, you have to take into consideration that willDestroyElement is called immediately before the element is destroyed, so after that method is done, $("...").remove() is invoked. So probably your code works, but you don't see the effects...