Backbone Marionette and jQuery plugin (jCarousel) - backbone.js

Question

I am stuck with setting jCarousel jquery plugin inside Backbone Marionette application. With pure Backbone I found a solution using onShow function.
But this does not work in Marionette
Here is the code of Marionette:
$(document).ready(function(){
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
TagsRegion: "#mycarousel"
});
MyApp.Tag = Backbone.Model.extend({
});
MyApp.TagCollection = Backbone.Collection.extend({
model: MyApp.Tag,
url: 'json/photos.json'
});
MyApp.TagItemView = Backbone.Marionette.ItemView.extend({
template: "#tag-template",
tagName: 'li'
});
MyApp.TagCollectionView = Backbone.Marionette.CollectionView.extend({
itemView: MyApp.TagItemView,
tagName: 'ul'
});
MyApp.addInitializer(function(options){
var tagCollection = new MyApp.TagCollection();
var tagCollectionView = new MyApp.TagCollectionView({
collection: tagCollection
});
tagCollection.fetch();
MyApp.TagsRegion.show(tagCollectionView);
});
MyApp.start();
});//END jQUERY
</script>
Then I am trying to find a solution how to build in the plugin...
var PluginView = Backbone.View.extend({
el:$('#mycarousel'),
onShow: function(){
this.$el.jcarousel({
scroll: 1,
auto: 13,
wrap: "circular",
size: 5,
initCallback: function mycarousel_initCallback(carousel) {
$('.jcarousel-control a').bind('click', function () {
carousel.scroll($.jcarousel.intval($(this).text()));
return false;
});
},
itemVisibleInCallback: {
onAfterAnimation: function (c, o, i, s) {
i = (i - 1) % $('#mycarousel li').size();
$('.jcarousel-control a').removeClass('active').addClass('inactive');
$('.jcarousel-control a:eq(' + i + ')').removeClass('inactive').addClass('active');
}
}
}); //jcarousel end
} //onShow function end
}); //PluginView End
var plug_view = new PluginView();
plug_view.render();
if (plug_view.onShow){
plug_view.onShow();
};
The problem is that carousel is based on UL with a bunch of li-tags and both the plugin and the marionette generates their own li-tags simultaneously. As a result a have empty carousel-li-tags and marionette-generated-li-tags containing all images and other content to be used inside carousel-li-tags.
I would appreciate if anyone helps to find any solution for this case as well as jquery-plugins in marionette in general.

Answer 1

If you use the Marionette ItemView, there is an onShow method that is fired once the view is rendered to the DOM. Then you would:
MyApp.TagsRegion.show(ItemViewGoesHere);
this will render your item view and once the content is rendered to the DOM, your onShow method will be called and you can render your jQuery plugin to an element within the view.