Backbone Marionette collection on DOM event

Question

I have a Backbone collection and Marionette CollectionView rendered in a unordered list. I just want to make it sortable, so I need to wait until the collectionView is placed in the DOM.

I can listen to the event which fires when the Collection is rendered, but I don't know how to do the same when the collection is placed in the DOM.

var ContactView = Backbone.Marionette.CollectionView.extend({
    id : "contacts",
    tagName: "ul",
    itemView: UserView,
    initialize: function(){
        this.triggerMethod("collection:rendered", this);
    }
});

    var collection = new ContactView({ collection: myContacts });
    listenTo(collection, "collection:rendered",usersRendered);
    $("#content").append(collection.render().el);

    usersRendered: function(){
        $("#contacts").sortable(); // #contacts not in the DOM yet 
    }

Jsfiddle

Answer 1

As you wrote, the CollectionView and CompositeView trigger a 'collection:rendered' and then 'render' method after the child views are rendered. The only way I can think of that you can accomplish what you'd like, is to provide the {el: '#contact'} when creating the ContactView instance. Alternatively, if you're appending the view.el, then you can call the .sortable() where you do it. The first approach is better, though.