我應該使用木偶複合視圖還是佈局？

但是，在我的集合中，我有5個過濾器綁定到事件，然後從API更新集合。

我看到它的方式，那裏有兩個選擇，我想旅行，這是更好：

1）使用的佈置圖，莫名其妙地找出一個CompositeView中如何捕捉過濾視圖選項和更新集合。 2）使用的OnRender顯示過濾後的意見，並再次抓住事件中CompositeView中

define(["marionette", "text!app/templates/posts/collection.html", "app/collections/posts", "app/views/posts/item"], 
    function(Marionette, Template, Collection, Item) { 
    "use strict" 
    return Backbone.Marionette.CompositeView.extend({ 


     template: Template, 
     itemView: Item, 
     itemViewContainer: "tbody", 


     filter: { 
     from: 0, 
     to: 15, 
     publish_target: null, 
     status: null, 
     type: null, 
     publish_from_date: null, //publish_from_date=2014-01-07 
     publish_to_date: null, //publish_to_date=2014-01-07 
     publish_from_time: null, //publish_from_time=01%3A00%20AM 
     publish_to_time: null, //publish_to_time=12%3A30%20AM 
     location_id: null, 
     client_id: null 
     }, 


     events: { 
     'change .filterBy': 'onClickFilter', 
     'change .filterByDate': 'onClickFilterDate' 
     }, 


     collectionEvents: { 
     'sync': 'hideLoading' 
     }, 


     initialize: function(options) { 

     //set loading, important we do this because we re-trigger the collection 
     this.setLoading(); 

     // don't call a new collection unless its the init load, we lose collection automatically triggered events otherwise 
     if (_.isEmpty(options) || !_.has(options, 'newCollection')) { 
      this.collection = new Collection() 
     } 

     //strip any null key values from this.filter so the api doesnt filter crap 
     this.filter = _.cleanNullFieldsFromObject(this.filter); 

     //fetch the collection 
     return this.collection.fetch({data: this.filter}) 
     }, 


     // date was triggered, so get the details 
     onClickFilterDate: function() { 
     var publishFrom = new Date($('#publish_from_date').val()); 
     var publishTo = new Date($('#publish_to_date').val()); 
     this.filter.publish_from_date = _.dateToYMD(publishFrom); 
     this.filter.publish_to_date = _.dateToYMD(publishTo); 
     this.filter.publish_from_time = _.dateToHM(publishFrom); 
     this.filter.publish_to_time = _.dateToHM(publishTo); 

     // from time is greater than two time, then fetch the collection 
     if ((publishFrom.getTime()/1000) < (publishTo.getTime()/1000)) { 
      this.initialize({newCollection: true}); 
     } 
     }, 


     // a typical filter is clicked, so figure out whats happening 
     onClickFilter: function (ev) { 
     var type = $('#'+ev.currentTarget.id).data('type') 
     switch (type) { 
      case 'status': 
      this.filter.status = $('#filterStatus').val(); 
      break; 
      case 'publish_target': 
      this.filter.publish_target = $('#filterPublishTarget').val(); 
      break; 
      case 'type': 
      this.filter.type = $('#filterType').val(); 
      break; 
      case 'client_id': 
      this.filter.client_id = $('#filterClientId').val(); 
      break; 
      case 'location_id': 
      this.filter.location_id = $('#filterLocationId').val(); 
      break; 
     } 
     this.initialize({newCollection: true}); 
     }, 


     hideLoading: function() { 
     this.$el.find('.loading-latch').removeClass('loading-active'); 
     }, 


     //set loading by appending to the latch 
     setLoading: function() { 
     this.$el.find('.loading-latch').addClass('loading-active'); 
     } 


    }) 
    }) 


define(["marionette", "text!app/templates/posts/item.html"], 
    function(Marionette, Template) { 
    "use strict" 
    return Backbone.Marionette.ItemView.extend({ 
     template: Template, 
     tagName: "tr", 


     initialize: function() { 
     this.model.set('statusReadable', this.model.getStatus()); 
     } 

    }) 
    })

來源

2014-01-28 azz0r

如果您想處理牽線木偶物體之間的觸發事件，我使用「通風口」。通風孔在木偶之內，允許鬆散耦合。 – Kalpers

我個人更喜歡將'Layouts'設置爲'CompositeViews'，佈局更加靈活，並且允許您在不費力的情況下擴展您的視圖。 –