Yeah, you're on the right track, document onload will happen before the page has been completely rendered.
You'll want to add that logic into the didInsertElement
hook of the component. Then you can scope it to that particular component instance. Additionally I changed it from and id to a class so you can grab that instance.
Component
App.MainSliderComponent = Em.Component.extend({
didInsertElement: function(){
var thisSlider = this.$('.main_slider');
thisSlider.cycle({
slideResize:0
});
thisSlider.css({
'width':'auto'
});
$(window).resize(function(){
var height = thisSlider.height();
thisSlider.css("height",height + 'px');
});
}
});
Template
<script type="text/x-handlebars" data-template-name="components/main-slider">
<div class="slider_wrap">
<div class="main_slider">
{{#each sliders}}
<div class="slider_area slider0{{unbound number}}">
<div class="slider_inner">
<div class="inner0{{unbound number}}">
<img {{bind-attr src="image" alt="image"}} class="nosp"/>
<img {{bind-attr src="sm_image" alt="sm_image"}} class="sp"/>
</div>
</div>
</div>
{{/each}}
</div>
</div>