destroy view and reload same view

Question

I have run into an issue where I need to completely destroy and remove a component within my view, because the 3rd party items in the component need a full page refresh to function correctly. The component will only update when the parent view changes to completely different view or if the page is refreshed. Is it possible to completely remove an ember component from the parent view and then rerender it with the newly updated model information from the parent view?

App.VideoPlayerComponent = Em.Component.extend({
      initPlayer: function(){
            //player stuff here 
            //updates video url yet previous video DOM garbage remains
      }.observes('url'),

      didInsertElement: function(){
            this.initPlayer();
      }
});

The video player im using is thePlatform js PDK which seems to be made for only static websites >:

Have you tried `this.rerender()`? Where `this` is your component instance. — Marcio Junior, Mar 14 '15 at 04:15
When I use rerender its not actually removing the component from the dom. I noticed the id of the component is still the same even when the parent view changes and the player is still present — Robert, Mar 14 '15 at 05:13

Sushant · Answer 1 · 2015-03-14T13:52:27.753

You can use this.rerender();

It will redraw the current view / component. Also note that willDestroy() will be called too.

Know more about it here

Update 1

You have to use the something like this to find the element on which you want to attach plugin

this.$().find("#my-video-element");

You also have to define code to destroy the video player element in the willDestroy hook. This will make sure video player is removed on rerender.

App.VideoPlayerComponent = Em.Component.extend({
      initPlayer: function(){
            //player stuff here 
            //updates video url yet previous video DOM garbage remains
      }.observes('url'),

      didInsertElement: function(){
            this.initPlayer();
      },

      willDestroyElement : function(){
           //here you need code that video plugin provide to destroy the video attached
           this.$().find("#my-video-element").destory("video")  
      }

});

destroy view and reload same view

1 Answers1