0

我坚持在 Backbone Marionette 应用程序中设置 jCarousel jquery 插件。使用纯主干，我找到了使用 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-tags，插件和 marionette 同时生成自己的 li-tags。因此，a 有空的 carousel-li-tags 和 marionette-generated-li-tags，其中包含要在 carousel-li-tags 中使用的所有图像和其他内容。

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

4

1 回答 1

0

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

MyApp.TagsRegion.show(ItemViewGoesHere);

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

于 2013-03-13T15:01:18.313 回答