Backbone Marionette with LayoutView

// layout view
define([
  "text!app/templates/posts/index.html",
  'app/views/posts/collection',
  '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(Template, CollectionView,
           FilterStatusView, FilterTypeView, FilterClientIdView, FilterLocationIdView, FilterPublishFromView,
           FilterPublishToView, FilterPublishTargetView) {
    "use strict"

    return Backbone.Marionette.Layout.extend({


      template: Template,


      regions: {
        filterType: '#filterTypeContainer',
        filterStatus: '#filterStatusContainer',
        filterPublishTarget: '#filterPublishTargetContainer',

        filterClientId: '#filterTypeContainer',
        filterLocationId: '#filterLocationIdContainer',

        filterPublishFrom: '#filterPublishFromContainer',
        filterPublishTo: '#filterPublishToContainer',

        postList: '#postList'
      },


      initialize: function() {

        // horrible scope issues with javascript
        var that = this;

        // we give time changing its own vent because we only want to trigger a collection when from is less than to
        MyApp.vent.on('filter:changeDateTime', function() {
          // get the filter data
          var filter = that.getFilter();

          // if the to time is higher than the from time
          if ( filter.publish_from_raw < filter.publish_to_raw) {
            that.renderCollection(filter);
          }
        });

        // if the filter change event is triggered in a sub view
        MyApp.vent.on('filter:change', function() {
          // fetch the collection and pass its filters through
          that.renderCollection(that.getFilter());
        })
      },


      getFilter: function() {

        // create our new filter object using jQuery picking the values
        var filter = {
          type: $('#filterType').val(),
          status: $('#filterStatus').val(),
          publish_target: $('#filterPublishTarget').val(),
          client_id: $('#filterClientId').val(),
          location_id: $('#filterLocationId').val(),
        };

        // date time fields
        var publishFrom = new Date($('#filterPublishFrom').val());
        var publishTo = new Date($('#filterPublishTo').val());

        if (!isNaN(parseFloat(publishFrom.getTime() / 1000)) && !isNaN(parseFloat(publishTo.getTime() / 1000))) {

          filter.publish_from = $('#filterPublishFrom').val();
          filter.publish_from_raw = parseInt(publishFrom.getTime() / 1000);
          filter.publish_from_date = _.dateToYMD(publishFrom);
          filter.publish_from_time = _.dateToHM(publishFrom);

          filter.publish_to = $('#filterPublishTo').val();
          filter.publish_to_raw = parseInt(publishTo.getTime() / 1000);
          filter.publish_to_date = _.dateToYMD(publishTo);
          filter.publish_to_time = _.dateToHM(publishTo);
        }

        // set the filter object to local storage (extended, not typical)
        localStorage.setObject('postFilter', filter);

        // return the filter after passing it through a null stripper
        return _.cleanNullFieldsFromObject(filter);
      },


      renderFilterType: function(options) {
        this.filterType.show(new FilterTypeView(options));
      },


      renderFilterStatus: function(options) {
        this.filterStatus.show(new FilterStatusView(options));
      },


      renderFilterPublishTarget: function(options) {
        this.filterPublishTarget.show(new FilterPublishTargetView(options));
      },


      renderFilterClientId: function(options) {
        this.filterClientId.show(new FilterClientIdView(options));
      },


      renderFilterLocationId: function(options) {
        this.filterLocationId.show(new FilterLocationIdView(options));
      },


      renderFilterPublishFrom: function(options) {
        this.filterPublishFrom.show(new FilterPublishFromView(options));
      },


      renderFilterPublishTo: function(options) {
        this.filterPublishTo.show(new FilterPublishToView(options));
      },


      renderCollection: function(options) {
        // render the post list
        this.postList.show(new CollectionView(options));
      },


      onRender: function () {

        // do we need to over write the filter object from local storage?
        var postFilter = localStorage.getObject('postFilter');

        // if local storage isn't empty then over ride the filter with it
        if (!_.isEmpty(postFilter)) {
          this.filter = postFilter;
        }

        // render the filters on our page
        this.renderFilterType(this.filter);
        this.renderFilterStatus(this.filter);
        this.renderFilterPublishTarget(this.filter);

        this.renderFilterClientId(this.filter);
        this.renderFilterLocationId(this.filter);

        this.renderFilterPublishFrom(this.filter);
        this.renderFilterPublishTo(this.filter);

        // render the collection
        console.log(this.filter);
        this.renderCollection(this.filter);
      }


    })
  })

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


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


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


      initialize: function(options) {

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

        // call the collection
        this.collection = new Collection();

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


      // 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');
      }


    })
  })
// status 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,


      events: {
        'change #filterStatus': 'onFilter'
      },


      initialize: function(options) {
        this.value = _.isEmpty(options) ? '-' : options.status;
      },


      onFilter: function() {
        MyApp.vent.trigger('filter:change');
      },


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


    })
  })