Question

Possible Duplicate:
Using Ember.js, how do I run some js after a view is rendered?

I use JWPlayer to show video on my site and JWPlayer use javascript to create viewer.

I have to run JWPlayer script after my hidden view change to show.

jwplayer('video_space').setup({
    'flashplayer': 'player.swf',
    'file': 'http://content.longtailvideo.com/videos/flvplayer.flv',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });

I binding my view with value on controller

<script type="text/x-handlebars" >
  {{#view Food.previewView }}
    Video session
    <div {{bindAttr class="showPreview"}}>
        <div id='video_space'>Video Loading...</div>
    </div>
    {{#view SC.Button target="Food.appController" action="show"}}
        show
    {{/view}} 
  {{/view}}
</script>

My javascript for all controller and view

Food = Ember.Application.create();

Food.appController = Ember.Object.create({
    showVideo: false,

    show: function(){
        Food.previewView.set('showVideo', true);
    }
});

Food.previewView = Ember.View.extend({
    showVideoBinding: 'Food.appController.showVideo',

    showPreview: function() {
        return this.get('showVideo') ? "show" : "hide";
    }.property('showVideo')
});

If I run JWPlayer script when change “showVideo” variable the video will error because $(‘#video_space’) is still hidden.

Emberjs have some delegate method like “afterViewChange” or “viewDidChange” ?

testing code
http://jsfiddle.net/apirak/Ay6Fh/

Answer 1

Override the Ember.View.didInsertElement function and place your customizations in there.

http://docs.emberjs.com/#doc=Ember.View&method=didInsertElement&src=false