diff --git a/assets/js/admin/settings-views-html-settings-tax.js b/assets/js/admin/settings-views-html-settings-tax.js
index 9b375742390..315e2bc9fee 100644
--- a/assets/js/admin/settings-views-html-settings-tax.js
+++ b/assets/js/admin/settings-views-html-settings-tax.js
@@ -10,66 +10,77 @@
paginationTemplate = wp.template( 'wc-tax-table-pagination' ),
$table = $( '.wc_tax_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;
- /**
- * Build the table contents.
- * @param rates
- */
- function renderTableContents( rates ) {
- // Blank out the contents.
- $tbody.empty();
+ // Blank out the contents.
+ this.$el.empty();
- // Populate $tbody with the current page of results.
- $.each( rates, function ( id, rowData ) {
- $tbody.append( rowTemplate( rowData ) );
- });
+ // Populate $tbody with the current page of results.
+ $.each( paged_rates, function ( id, rowData ) {
+ view.$el.append( view.rowTemplate( rowData ) );
+ });
- // Initialize autocomplete for countries.
- $tbody.find( 'td.country input' ).autocomplete({
- source: data.countries,
- minLength: 3
- });
+ // Initialize autocomplete for countries.
+ this.$el.find( 'td.country input' ).autocomplete({
+ source: data.countries,
+ minLength: 3
+ });
- // Initialize autocomplete for states.
- $tbody.find( 'td.state input' ).autocomplete({
- source: data.states,
- minLength: 3
- });
+ // Initialize autocomplete for states.
+ this.$el.find( 'td.state input' ).autocomplete({
+ source: data.states,
+ 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)
- $tbody.find( 'td.postcode input, td.city input').change(function() {
- $(this).attr( 'name', $(this).data( 'name' ) );
- });
- }
+ // 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)
+ this.$el.find( 'td.postcode input, td.city input' ).change(function() {
+ $(this).attr( 'name', $(this).data( 'name' ) );
+ });
- /**
- * Renders table contents by page.
- */
- function renderPage( page_num ) {
- var qty_pages = Math.ceil( data.rates.length / data.limit );
-
- page_num = parseInt( page_num, 10 );
- if ( page_num < 1 ) {
- page_num = 1;
- } else if ( page_num > qty_pages ) {
- page_num = qty_pages;
- }
-
- var first_index = data.limit * ( page_num - 1),
- last_index = data.limit * page_num;
-
- renderTableContents( data.rates.slice( first_index, last_index ) );
-
- if ( data.rates.length > data.limit ) {
- // We've now displayed our initial page, time to render the pagination box.
- $pagination.html( paginationTemplate( {
- qty_rates : data.rates.length,
- current_page : page_num,
- qty_pages : qty_pages
- } ) );
- }
- }
+ if ( qty_pages > 1 ) {
+ // We've now displayed our initial page, time to render the pagination box.
+ $pagination.html( paginationTemplate( {
+ qty_rates : qty_rates,
+ current_page : this.page,
+ qty_pages : qty_pages
+ } ) );
+ }
+ },
+ initialize : function() {
+ this.qty_pages = Math.ceil( this.model.get( 'rates' ).length / this.per_page );
+ },
+ sanitizePage : function( page_num ) {
+ page_num = parseInt( page_num, 10 );
+ if ( page_num < 1 ) {
+ page_num = 1;
+ } else if ( page_num > this.qty_pages ) {
+ page_num = this.qty_pages;
+ }
+ return page_num;
+ }
+ } ),
+ WCTaxTableModelInstance = new WCTaxTableModelConstructor({
+ 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.