58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
/*jshint multistr:true */
|
|
|
|
this.recline = this.recline || {};
|
|
this.recline.View = this.recline.View || {};
|
|
|
|
(function($, my) {
|
|
|
|
my.Pager = Backbone.View.extend({
|
|
className: 'recline-pager',
|
|
template: ' \
|
|
<div class="pagination"> \
|
|
<ul> \
|
|
<li class="prev action-pagination-update"><a href="">«</a></li> \
|
|
<li class="active"><a><input name="from" type="text" value="{{from}}" /> – <input name="to" type="text" value="{{to}}" /> </a></li> \
|
|
<li class="next action-pagination-update"><a href="">»</a></li> \
|
|
</ul> \
|
|
</div> \
|
|
',
|
|
|
|
events: {
|
|
'click .action-pagination-update': 'onPaginationUpdate',
|
|
'change input': 'onFormSubmit'
|
|
},
|
|
|
|
initialize: function() {
|
|
_.bindAll(this, 'render');
|
|
this.el = $(this.el);
|
|
this.model.bind('change', this.render);
|
|
this.render();
|
|
},
|
|
onFormSubmit: function(e) {
|
|
e.preventDefault();
|
|
var newFrom = parseInt(this.el.find('input[name="from"]').val());
|
|
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
|
|
this.model.set({size: newSize, from: newFrom});
|
|
},
|
|
onPaginationUpdate: function(e) {
|
|
e.preventDefault();
|
|
var $el = $(e.target);
|
|
var newFrom = 0;
|
|
if ($el.parent().hasClass('prev')) {
|
|
newFrom = this.model.get('from') - Math.max(0, this.model.get('size'));
|
|
} else {
|
|
newFrom = this.model.get('from') + this.model.get('size');
|
|
}
|
|
this.model.set({from: newFrom});
|
|
},
|
|
render: function() {
|
|
var tmplData = this.model.toJSON();
|
|
tmplData.to = this.model.get('from') + this.model.get('size');
|
|
var templated = Mustache.render(this.template, tmplData);
|
|
this.el.html(templated);
|
|
}
|
|
});
|
|
|
|
})(jQuery, recline.View);
|
|
|