Backbone Marionette with CollectionView

// collection view
define(["marionette", "text!app/templates/posts/collection.html", "app/collections/posts", "app/views/posts/item",
  // we could just create a dead view that's sole job is including these, maybe /posts/filter?
  'app/views/posts/partials/status',
  'app/views/posts/partials/type',
  'app/views/posts/partials/client_id',
  'app/views/posts/partials/location_id',
  'app/views/posts/partials/publish_from_datetime',
  'app/views/posts/partials/publish_to_datetime',
  'app/views/posts/partials/publish_target'
],
  function(Marionette, Template, Collection, Item,
           StatusView, TypeView, ClientIdView, LocationIdView, PublishFromDateTimeView,
           PublishToDateTimeView, PublishTargetView) {
    "use strict"
    return Backbone.Marionette.CompositeView.extend({


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


      filter: {
        from: 0,
        to: 15
      },


      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')) {
          // load the postFilter from local storage
          var postFilter = localStorage.getObject('postFilter');

          // if the local storage isn't empty, then set it as the current filter
          if (!_.isEmpty(postFilter)) {
            this.filter = postFilter;
          }

          // get the collection
          this.collection = new Collection()
        } else {
          // set the filter on memory
          localStorage.setObject('postFilter', this.filter);
        }

        //strip any null key values from this.filter so the api doesn't 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() {

        //fetch the from and to values
        var publishFrom = new Date($('#publish_from_date').val());
        var publishTo = new Date($('#publish_to_date').val());

        this.filter.publish_from = $('#publish_from_date').val();
        this.filter.publish_from_date = _.dateToYMD(publishFrom);
        this.filter.publish_from_time = _.dateToHM(publishFrom);

        this.filter.publish_to = $('#publish_to_date').val();
        this.filter.publish_to_date = _.dateToYMD(publishTo);
        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) {

        // get the data value of the filter being touched
        var type = $('#'+ev.currentTarget.id).data('type')

        // switch statement to figure out which filter was used
        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});
      },


      // hide the loading state
      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');
      },


      onRender: function () {
        this.subViews = {
          status: new StatusView(this.filter).render(),
          type: new TypeView(this.filter).render(),
          publish_target: new PublishTargetView(this.filter).render(),
          location_id: new LocationIdView(this.filter).render(),
          client_id: new ClientIdView(this.filter).render(),
          publish_from_datetime: new PublishFromDateTimeView(this.filter).render(),
          publish_to_datetime: new PublishToDateTimeView(this.filter).render()
        };

        this.$el.find('#postsPartialStatus').html(this.subViews.status.el);
        this.$el.find('#postsPartialPublishTarget').html(this.subViews.publish_target.el);
        this.$el.find('#postsPartialType').html(this.subViews.type.el);
        this.$el.find('#postsPartialLocationId').html(this.subViews.location_id.el);
        this.$el.find('#postsPartialClientId').html(this.subViews.client_id.el);
        this.$el.find('#postsPartialPublishFromDateTime').html(this.subViews.publish_from_datetime.el);
        this.$el.find('#postsPartialPublishToDateTime').html(this.subViews.publish_to_datetime.el);
      }


    })
  })

// item view
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());
    }

  })
})
// status filter view
define(["marionette", "text!app/templates/posts/partials/status.html", 'app/models/post'],
  function(Marionette, Template, Model) {
    "use strict"
    return Backbone.Marionette.ItemView.extend({
      template: Template,


      initialize: function(value) {
        this.values = new Model().getStatuses();
        this.value = value.status;
      },


      serializeData: function() {
        return {values: this.values, value: this.value};
      }


    })
  })