title: Dynamically change subview
body: <p>Using EmberJs I have to create a view that can contains a player (as Youtube, Photosynth, Html COntent, ecc.) and it has to change dynamically based on controller property that contains the item to play.</p>
  
  <p>I have created some views that are the player for each type of content, like in this example</p>
  
  <pre><code>App.basePlayer = Em.View.extend({
      templateName : 'base'
    });
  
  App.playerEmpty= App.basePlayer.extend({
      templateName : 'empty'
    });
  
  App.player1= App.basePlayer.extend({
      templateName : 'p1'
    });
  
  App.player2= App.basePlayer.extend({
      templateName : 'p2'
    });
  </code></pre>
  
  <p>Now i have to create a view that can append one of this views in its content.
  If the view is a normal Ember.View that binds in its content a view stored in a property, it works on initialization, but obviously if I set a new view, it will not re-rendered.</p>
  
  <p>To solve this problem I created a ContainerView that contains the player :</p>
  
  <pre><code>App.IndexView = Em.CollectionView.extend({
  
    childViews: ['header', App.playerEmpty],
  
    header: Em.View.extend({
      templateName : 'h'
    })
  
  });
  </code></pre>
  
  <p>Then I also created 2 methods that when the property Item in the controller is updated, they remove the old player view and add new one consistent with the type of item of controller.</p>
  
  <pre><code>  onItemChange : function(){
  
      var item = this.get('controller.item'),
          playerClass = null;
  
  
      if(item === null){
        playerClass = App.playerEmpty;
      }
  
      else if(item instanceof App.Item1){  
        playerClass = App.player1;
      }
      else if(item instanceof App.Item2){  
        playerClass = App.player2;
      }
  
      this.setPlayerView(playerClass);
  
  
    }.observes('controller.item'),
  
  
    setPlayerView: function(playerClass){
  
      var v =this.get('childViews').find(function(item, index, enumerable){
        return item instanceof App.basePlayer;
      });
  
      this.get('childViews').removeObject(v);
  
      this.get('childViews').pushObject(playerClass.create());
  
    }
  </code></pre>
  
  <p>It's good solution or there's some better?</p>
  
  <p>Here there is an Example: <a href="http://emberjs.jsbin.com/naxuboyi/4/edit" rel="nofollow">http://emberjs.jsbin.com/naxuboyi/4/edit</a></p>