Marrionette Table without composite view

gistfile1.txt

//
//Regions
//

var NoWrapRegion = Backbone.Marionette.Region.extend({
  attachHtml: function (view) {
    this.el.innerHTML="";
    var children = view.el.childNodes;
    while (children.length > 0) {
        this.el.appendChild(children[0]);
      }
    view.setElement(this.el, true)
  }
});



//
//Views
//

var NoChildsRowView = Backbone.Marionette.ItemView.extend({
  serializeData: function(){
    return {
      colspan: this.options.colspan,
    }
  },
  template: "#show_no_children_message_row_template",
  tagName: 'tr',
});

var ListRowView = Backbone.Marionette.ItemView.extend({
  serializeData: function(){
    var data = this.model.toJSON();
    data.rowNum = (this.model.collection.state.currentPage * this.model.collection.state.pageSize ) + this.model.collection.indexOf(this.model) + 1;
    data.model = this.model;
    return data;
  },
  modelEvents: {
    'change':'render'
  },
  templateHelpers: viewHelpers,
  tagName: 'tr',
  className: 'listview-child-row',
  triggers: {
      "click": "show:detail"
  },
  template: '#list_row_template',
  });

var ListTbodyView = Backbone.Marionette.CollectionView.extend({
  childView: ListRowView,
  emptyView: NoChildsRowView,
  emptyViewOptions: {
    colspan: 8,
  }
});

var ListTfootView = Backbone.Marionette.ItemView.extend({
  serializeData: function(){
    return { pagination: { state: this.collection.state } };
  },
  template: '#list_tfoot_template',
  templateHelpers: viewHelpers,
  collectionEvents: {
    "sync": "render"
  },
  ui: {
    "paginationButtons" : ".tsg-listview-pagination-button",
    "firstPage" : ".tsg-listview-pagination-first",
    "prevPage" : ".tsg-listview-pagination-prev",
    "nextPage" : ".tsg-listview-pagination-next",
    "lastPage" : ".tsg-listview-pagination-last",
    "getPage" : ".tsg-listview-pagination-page"
  },
  events: {
    "click @ui.firstPage": "getFirstPage",
    "click @ui.prevPage": "getPrevPage",
    "click @ui.nextPage": "getNextPage",
    "click @ui.lastPage": "getLastPage",
    "click @ui.getPage": "getPage"
  },
  getFirstPage: function(event){
    this.collection.getFirstPage();
  },
  getPrevPage: function(event){
    this.collection.getPreviousPage();
  },
  getNextPage: function(event){
    this.collection.getNextPage();
  },
  getLastPage: function(event){
    this.collection.getLastPage();
  },
  getPage: function(event){
    var page = parseInt($(event.currentTarget).attr('page'));
    this.collection.getPage(page-1);
  },
  onRender:function(){
    this.renderPaginationButtons();
  },
  renderPaginationButtons: function(){
    var view = this;
    this.ui.paginationButtons.button();
    if( ! this.collection.hasPreviousPage() ){
      this.ui.prevPage.button('disable');
    }
    if(! this.collection.hasNextPage() ){
      this.ui.nextPage.button('disable'); 
    }
    this.ui.paginationButtons.each(function(elem){
      var buttonPage = parseInt($(this).attr('page')) - 1;
      if( buttonPage == view.collection.state.currentPage ){
        $(this).addClass('ui-state-active');
      }
    });
  },
});

var ListLayoutView = Backbone.Marionette.LayoutView.extend({
  serializeData: function(){
    return { pagination: { state: this.collection.state }, searchableProperties:this.collection.searchable_properties, model: this.collection.model };
  },
  templateHelpers: viewHelpers,
  ui: {

    "sortColumn": '.listview-table-sort-column',
    "sortCaret": '.listview-table-sort-caret',
    "loadingIndicator": '.tsg-listview-table-loading-indicator'
  },
  modelEvents: {
    'change:isLoading': 'renderLoadingIndicator'
  },
  events: {
    "click @ui.sortColumn": "changeSorting"
  },
  regionClass: NoWrapRegion,
  regions: {
    tbody: '.tsg-listview-table-tbody',
    tfoot: '.tsg-listview-table-tfoot'
  },
  renderLoadingIndicator: function(){
    if(this.model.get('isLoading')){
      this.ui.loadingIndicator.css('visibility', 'visible');
    }else{
      this.ui.loadingIndicator.css('visibility', 'hidden');
    }
  },
  onChildviewShowDetail: function(childView){
    this.triggerMethod('show:detail', childView);
  },
  changeSorting: function(event){
    var prop = $(event.currentTarget).attr('prop_name');
    var order = $(event.currentTarget).find(".listview-table-sort-caret").hasClass('fa-caret-down')?-1:1;
    this.ui.sortCaret.removeClass('fa-caret-up').addClass('fa-caret-down');
    if(order == -1){
      $(event.currentTarget).find(".tsg-listview-table-sort-caret").removeClass('fa-caret-down').addClass('fa-caret-up');
    }
    this.collection.setSorting(prop,order*-1);
    this.collection.getFirstPage();
  },
  template: '#list_layout_template',
  onBeforeShow: function(){
    this.showChildView('tbody', new ListTbodyView({collection: this.collection}));
    this.showChildView('tfoot', new ListTfootView({collection: this.collection}));
  }
});

//
//Templates
//
<script type="text/template" id="list_row_template">
	<td><%= rowNum %></td>
	<td><%= id %></td>
	<td><%= code %></td>
	<td><%= part.sku %></td>
	<td><%= partBin.name %></td>
	<td><%= partSet.code %>(<%= partSet.orderRef %>)</td>
	<td><%= currentCount %></td>
	<td><%= moment(timestamp).format('YYYY-M-D h:m:s A') %></td>
</script>

<script type="text/template" id="list_layout_template">
	<h4>Part Stocks List</h4>
	<button class="tsg-partstock-add">Add New Stock Entry</button>
	<div class="tsg-listview-table-container">
		<div class="tsg-listview-table-loading-indicator"><img src="/operations/images/ajax-loader.gif" alt="Loading" /></div>
		<table id="stock_for_action_table" class="tsg-listview-table">
			<thead>
				<tr>
					<th>Row#</th>
					<th class="tsg-listview-table-sort-column" prop_name="id">PartStock#<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="code">Part Stock Code<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="part">Part SKU<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="partBin">Part Bin Name<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="partSet">Part Set Code<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="currentCount">Current Count<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
					<th class="tsg-listview-table-sort-column" prop_name="timestamp">Last Modified<span class="tsg-listview-table-sort-caret fa fa-caret-down"></span></th>
				</tr>
			</thead>
			<tbody class="tsg-listview-table-tbody"></tbody>
			<tfoot class="tsg-listview-table-tfoot"></tfoot>
		</table>
	</div>
</script>

<script type="text/template" id="list_tfoot_template">
	<tr>
		<td class="tsg-listview-pagination" colspan="8">
			<button class="tsg-listview-pagination-button tsg-listview-pagination-first">&lt;&lt;</button>
			<button class="tsg-listview-pagination-button tsg-listview-pagination-prev">&lt;</button>
			<%= getPaginationHTML(pagination.state) %>
			<button class="tsg-listview-pagination-button tsg-listview-pagination-next">&gt;</button>
			<button class="tsg-listview-pagination-button tsg-listview-pagination-last">&gt;&gt;</button>
		</td>
	</tr>
</script>