Skip to content

Instantly share code, notes, and snippets.

@belackriv
Last active September 21, 2016 21:22
Show Gist options
  • Save belackriv/008087f6f005aee1167f to your computer and use it in GitHub Desktop.
Save belackriv/008087f6f005aee1167f to your computer and use it in GitHub Desktop.
Marrionette Table without composite view
//
//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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment