Change the structure to Backbone models/views.

This commit is contained in:
George Stephanis 2015-08-08 14:46:21 -04:00
parent 9c0af3c7ff
commit 9c5a35762b
1 changed files with 65 additions and 54 deletions

View File

@ -10,66 +10,77 @@
paginationTemplate = wp.template( 'wc-tax-table-pagination' ), paginationTemplate = wp.template( 'wc-tax-table-pagination' ),
$table = $( '.wc_tax_rates' ), $table = $( '.wc_tax_rates' ),
$tbody = $( '#rates' ), $tbody = $( '#rates' ),
$pagination = $( '#rates-pagination' ); $pagination = $( '#rates-pagination' ),
WCTaxTableModelConstructor = Backbone.Model.extend( {} ),
WCTaxTableViewConstructor = Backbone.View.extend({
rowTemplate : rowTemplate,
per_page : data.limit,
page : data.page,
render : function() {
var rates = this.model.get( 'rates' ),
qty_rates = rates.length,
qty_pages = Math.ceil( qty_rates / this.per_page ),
first_index = this.per_page * ( this.page - 1),
last_index = this.per_page * this.page,
paged_rates = rates.slice( first_index, last_index ),
view = this;
/** // Blank out the contents.
* Build the table contents. this.$el.empty();
* @param rates
*/
function renderTableContents( rates ) {
// Blank out the contents.
$tbody.empty();
// Populate $tbody with the current page of results. // Populate $tbody with the current page of results.
$.each( rates, function ( id, rowData ) { $.each( paged_rates, function ( id, rowData ) {
$tbody.append( rowTemplate( rowData ) ); view.$el.append( view.rowTemplate( rowData ) );
}); });
// Initialize autocomplete for countries. // Initialize autocomplete for countries.
$tbody.find( 'td.country input' ).autocomplete({ this.$el.find( 'td.country input' ).autocomplete({
source: data.countries, source: data.countries,
minLength: 3 minLength: 3
}); });
// Initialize autocomplete for states. // Initialize autocomplete for states.
$tbody.find( 'td.state input' ).autocomplete({ this.$el.find( 'td.state input' ).autocomplete({
source: data.states, source: data.states,
minLength: 3 minLength: 3
}); });
// Postcode and city don't have `name` values by default. They're only created if the contents changes, to save on database queries (I think) // Postcode and city don't have `name` values by default. They're only created if the contents changes, to save on database queries (I think)
$tbody.find( 'td.postcode input, td.city input').change(function() { this.$el.find( 'td.postcode input, td.city input' ).change(function() {
$(this).attr( 'name', $(this).data( 'name' ) ); $(this).attr( 'name', $(this).data( 'name' ) );
}); });
}
/** if ( qty_pages > 1 ) {
* Renders table contents by page. // We've now displayed our initial page, time to render the pagination box.
*/ $pagination.html( paginationTemplate( {
function renderPage( page_num ) { qty_rates : qty_rates,
var qty_pages = Math.ceil( data.rates.length / data.limit ); current_page : this.page,
qty_pages : qty_pages
page_num = parseInt( page_num, 10 ); } ) );
if ( page_num < 1 ) { }
page_num = 1; },
} else if ( page_num > qty_pages ) { initialize : function() {
page_num = qty_pages; this.qty_pages = Math.ceil( this.model.get( 'rates' ).length / this.per_page );
} },
sanitizePage : function( page_num ) {
var first_index = data.limit * ( page_num - 1), page_num = parseInt( page_num, 10 );
last_index = data.limit * page_num; if ( page_num < 1 ) {
page_num = 1;
renderTableContents( data.rates.slice( first_index, last_index ) ); } else if ( page_num > this.qty_pages ) {
page_num = this.qty_pages;
if ( data.rates.length > data.limit ) { }
// We've now displayed our initial page, time to render the pagination box. return page_num;
$pagination.html( paginationTemplate( { }
qty_rates : data.rates.length, } ),
current_page : page_num, WCTaxTableModelInstance = new WCTaxTableModelConstructor({
qty_pages : qty_pages rates : data.rates,
} ) ); } ),
} WCTaxTableInstance = new WCTaxTableViewConstructor({
} model : WCTaxTableModelInstance,
// page : data.page, // I'd prefer to have these two specified down here in the instance,
// per_page : data.limit, // but it doesn't seem to recognize them in render if I do. :\
el : '#rates'
} );
/** /**
* Handle the initial display. * Handle the initial display.