Change the structure to Backbone models/views.
This commit is contained in:
parent
9c0af3c7ff
commit
9c5a35762b
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue