Question

我坚持在Backbone Marionette应用程序中设置jCarousel jquery插件。使用纯Backbone，我找到了一个使用onShow函数的解决方案。但这在Marionette中不起作用这是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>

然后我试图找到一个如何构建插件的解决方案......

    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();
     };

问题是旋转木马基于UL，带有一堆li标签，插件和牵线木偶同时生成自己的li标签。因此，有一个空的carousel-li-tags和marionette-generated-li-tags包含所有图像和其他内容，用于carousel-li-tags内。

如果有人帮助找到这个案例的任何解决方案以及一般的牵线木偶jquery-plugins，我将不胜感激。

Answer 1

如果使用Marionette ItemView，则会在将视图呈现给DOM时触发onShow方法。然后你会：

MyApp.TagsRegion.show(ItemViewGoesHere);

这将呈现您的项目视图，一旦内容呈现给DOM，您的onShow方法将被调用，您可以将jQuery插件呈现给视图中的元素。

Backbone Marionette和jQuery插件（jCarousel）

1 个答案: