销毁视图并重新加载相同的视图

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 >:

Answer 1

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

});