Marionette and Backbone. Rendering javascript slider in View

Question

This is the code:

NewEntry_CategoryView = Backbone.Marionette.ItemView.extend({
template: "#NewEntry_Category-template",
tagName: "p",

initialize: function () {
    $("#sliderContainer").slider();
}

});

NewEntry_CategoriesView = Backbone.Marionette.CompositeView.extend({
template: "#NewEntry_Categories-template",
tagName: "div",
itemView: NewEntry_CategoryView,
itemViewContainer: '#categoryContainer',

appendHtml: function (collectionView, itemView) {
    collectionView.$("#categoryContainer").append(itemView.el);
}
});

Why does the jquery ui slider not render when I show the NewEntry_CategoriesView ?

Answer 1

DOM events/manipulation like slide() won't have any effect on the view object's initialization because there is no such DOM element available yet.

Instead, you need to listen to dom:refresh of the view to manipulate its DOM element.

So, just put the code in onDomRefreshin your ItemView

onDomRefresh: function(){ $('#sliderContainer').slide() };

This above is a direct fix. But there are two more things to improve:

1. Don't call other div outside of this view when possible. In this case, if #sliderContainer belongs to another view, send an event to allow it slide itself. This is not the job of CategoryView. If it is inside current view, refer it with this.$el.find(".some-div") or better yet ui object.

2. Your collectionView's appendHtml is unnecessary. Marionette also takes of this common case.