Backbone Marionette和jQuery插件（jCarousel）

我堅持在Backbone Marionette應用程序中設置jCarousel jQuery插件。用純骨幹我找到了一個使用onShow函數的解決方案。但是，這並不在木偶工作，這是木偶的代碼：Backbone Marionette和jQuery插件（jCarousel）

 $(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，插件和木偶兩者同時生成自己的li-tags。因此，有空的carousel-li-tags和marionette-generated-li-tags包含所有圖像和其他內容，以便在carousel-li-tags中使用。

我將不勝感激，如果有人幫助找到任何解決方案，以及在一般的木偶jquery插件。

來源

2012-09-21 Sergei Kusht

你不應該把所有的代碼都放在'$ .ready'回調中，儘快定義每一個代碼，並且只有在準備就緒時才啓動該應用程序。 – Cobby

您是否嘗試過將木偶標籤變爲'div'，那麼也許您不會有衝突？只是簡單的從我頭頂上... – rudolph9

如果使用Marionette ItemView，則會在視圖呈現給DOM時觸發onShow方法。那麼你會：

MyApp.TagsRegion.show(ItemViewGoesHere);

這會使你的項目視圖，一旦內容呈現到DOM，你昂秀的方法將被調用，你可以使你的jQuery插件到視圖中的元素。

來源

2013-03-13 15:01:18 Kalpers

Backbone Marionette和jQuery插件（jCarousel）

回答

相關問題