0

BackboneMarionetteアプリケーション内でjCarouseljqueryプラグインを設定するのに行き詰まっています。純粋なバックボーンで、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();
     };

問題は、カルーセルが多数のliタグを備えたULに基づいており、プラグインとマリオネットの両方が独自のliタグを同時に生成することです。その結果、カルーセルliタグ内で使用されるすべての画像とその他のコンテンツを含む空のカルーセルliタグとマリオネット生成liタグがあります。

誰かがこのケースの解決策と、一般的なマリオネットのjquery-pluginsを見つけるのを手伝ってくれれば幸いです。

4

1 に答える 1

0

Marionette ItemView を使用する場合、ビューが DOM にレンダリングされると起動される onShow メソッドがあります。次に、次のことを行います。

MyApp.TagsRegion.show(ItemViewGoesHere);

これによりアイテム ビューがレンダリングされ、コンテンツが DOM にレンダリングされると、onShow メソッドが呼び出され、jQuery プラグインをビュー内の要素にレンダリングできます。

于 2013-03-13T15:01:18.313 に答える