JQuery Selector not Selecting List Items in EmberJS View

Question

I am creating an unordered list in an Ember.js view by using the each helper. I also have some Javascript that runs on the didInsertElement hook, which selects each list item. However, that selector fails to select any elements if I generate the list using the each helper. Any thoughts on how to get results from the selector?

relevant view:

<script type="text/x-handlebars" data-template-name="slider">
    <ul>
        {{#each slide in controller}}
            <li><img src="./resource/locations/1/test.jpg"></li>
        {{/each}}
    </ul>
    <br>
</script>

relevant JS:

App.SliderView = Ember.View.extend({
    templateName: "slider",
    didInsertElement: function() {
        var self = this;
        var items = $(">ul>li", self.$());

        //...
    }
});

Update:

I believe the problem arises because I am loading the models that populate my controller asynchronously. Is there any way to listen to the event that occurs when the model is first populated?

My Model Code:

App.Location = DS.Model.extend({
    thenSlider: DS.hasMany("slide", {async: true})
});

App.Slide = DS.Model.extend({
    //...
});

Answer 1

Looks good to me, you're probably facing a problem where your data is populating after didInsertElement has fired. didInsertElement only fires when Slider has been inserted initially, not necessarily when the elements inside of it are inserted/modified.

http://emberjs.jsbin.com/liluxece/1/edit

Since it's async, I'd use render and hook it up to another view, that way you can use didInsertElement on a case by case situation for each item.

{{render 'template' context}}

Here's an example

http://emberjs.jsbin.com/liluxece/5/edit