Backbone Marionette 和 jQuery 插件 (jCarousel)答案

【问题标题】：Backbone Marionette and jQuery plugin (jCarousel)Backbone Marionette 和 jQuery 插件 (jCarousel)
【发布时间】：2012-09-21 07:24:04
【问题描述】：

我坚持在 Backbone Marionette 应用程序中设置 jCarousel jquery 插件。使用纯主干，我找到了使用 onShow 函数的解决方案。但这在木偶中不起作用这是木偶的代码：

        $(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-tags，插件和 marionette 同时生成自己的 li-tags。因此，a 有空的 carousel-li-tags 和 marionette-generated-li-tags，其中包含要在 carousel-li-tags 中使用的所有图像和其他内容。

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

【问题讨论】：

你不应该在$.ready回调中丢弃你所有的代码，尽快定义每一个，只有在准备好时才启动那个应用程序。
您是否尝试过仅将木偶标签设为div，那么也许您不会有冲突？只是一些简单的事情在我的脑海中......

标签： backbone.js jcarousel

【解决方案1】：

如果您使用 Marionette ItemView，则会在视图呈现到 DOM 后触发 onShow 方法。那么你会：

MyApp.TagsRegion.show(ItemViewGoesHere);

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

【讨论】：