Skip to content

Instantly share code, notes, and snippets.

@beames

beames/index.html

Created August 22, 2014 13:11
Show Gist options
  • Save beames/cffe08e322fbbfc7978d to your computer and use it in GitHub Desktop.
Save beames/cffe08e322fbbfc7978d to your computer and use it in GitHub Desktop.
Download ZIP
Ember + Simple Bootstrap Typehead ember-Pagenation // source http://jsbin.com/tacah/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ember-Pagenation" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
<style> body { padding: 30px; }</style>
<meta charset=utf-8 />
<title>Ember + Simple Bootstrap Typehead</title>
<script type="text/x-handlebars" data-template-name="application">
<h3>Pagination w/Ember.js</h3>
<p>Made by <a href="http://hawkins.io">Adam Hawkins</a></p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h3>Total Pages: {{totalPages}}</h3>
{{#each paginatedContent}}
<p>{{title}}</p>
{{/each}}
{{#if hasPages}}
<p><a href="#" {{action toggleOrder}}>Toggle Order</a></p>
<div class="pagination">
<ul>
{{#if prevPage}}
<li><a href="#" {{action "selectPage" prevPage}}>&laquo;</a></li>
{{else}}
<li class="disabled"><a>&laquo;</a></li>
{{/if}}
{{#each pages itemController="page"}}
<li {{bindAttr class="active disabled"}}><a href="#" {{action "selectPage" number}}>{{number}}</a></li>
{{/each}}
{{#if nextPage}}
<li><a href="#" {{action "selectPage" nextPage}}>&raquo;</a></li>
{{else}}
<li class="disabled"><a>&raquo;</a></li>
{{/if}}
</ul>
</div>
{{/if}}
</script>
</head>
<body>
<script id="jsbin-javascript">
window.App = Ember.Application.create();
App.PostsController = Ember.ArrayController.extend({
sortProperties: ['id'],
sortAscending: false,
page: 1,
perPage: 10,
totalPages: (function() {
return Math.ceil(this.get('length') / this.get('perPage'));
}).property('length', 'perPage'),
pages: (function() {
var collection = Ember.A();
for(var i = 0; i < this.get('totalPages'); i++) {
collection.pushObject(Ember.Object.create({
number: i + 1
}));
}
return collection;
}).property('totalPages'),
hasPages: (function() {
return this.get('totalPages') > 1;
}).property('totalPages'),
prevPage: (function() {
var page = this.get('page');
var totalPages = this.get('totalPages');
if(page > 1 && totalPages > 1) {
return page - 1;
} else {
return null;
}
}).property('page', 'totalPages'),
nextPage: (function() {
var page = this.get('page');
var totalPages = this.get('totalPages');
if(page < totalPages && totalPages > 1) {
return page + 1;
} else {
return null;
}
}).property('page', 'totalPages'),
paginatedContent: (function() {
var start = (this.get('page') - 1) * this.get('perPage');
var end = start + this.get('perPage');
return this.get('arrangedContent').slice(start, end);
}).property('page', 'totalPages', 'arrangedContent.[]'),
selectPage: function(number) {
this.set('page', number);
},
toggleOrder: function() {
this.toggleProperty('sortAscending');
}
});
App.PageController = Ember.ObjectController.extend({
currentPage: Ember.computed.alias('parentController.page'),
active: (function() {
return this.get('number') === this.get('currentPage');
}).property('number', 'currentPage')
});
App.Router.map(function() {
this.route('posts');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('posts');
}
});
App.PostsRoute = Ember.Route.extend({
model: function() {
var collection = Ember.A();
for(var i = 0; i < 45; i++) {
collection.pushObject(Ember.Object.create({
title: "Post " + (i + 1),
id: i
}));
}
return collection;
}
});
</script>
</body>
</html>
Raw
jsbin.tacah.js
window.App = Ember.Application.create();
App.PostsController = Ember.ArrayController.extend({
sortProperties: ['id'],
sortAscending: false,
page: 1,
perPage: 10,
totalPages: (function() {
return Math.ceil(this.get('length') / this.get('perPage'));
}).property('length', 'perPage'),
pages: (function() {
var collection = Ember.A();
for(var i = 0; i < this.get('totalPages'); i++) {
collection.pushObject(Ember.Object.create({
number: i + 1
}));
}
return collection;
}).property('totalPages'),
hasPages: (function() {
return this.get('totalPages') > 1;
}).property('totalPages'),
prevPage: (function() {
var page = this.get('page');
var totalPages = this.get('totalPages');
if(page > 1 && totalPages > 1) {
return page - 1;
} else {
return null;
}
}).property('page', 'totalPages'),
nextPage: (function() {
var page = this.get('page');
var totalPages = this.get('totalPages');
if(page < totalPages && totalPages > 1) {
return page + 1;
} else {
return null;
}
}).property('page', 'totalPages'),
paginatedContent: (function() {
var start = (this.get('page') - 1) * this.get('perPage');
var end = start + this.get('perPage');
return this.get('arrangedContent').slice(start, end);
}).property('page', 'totalPages', 'arrangedContent.[]'),
selectPage: function(number) {
this.set('page', number);
},
toggleOrder: function() {
this.toggleProperty('sortAscending');
}
});
App.PageController = Ember.ObjectController.extend({
currentPage: Ember.computed.alias('parentController.page'),
active: (function() {
return this.get('number') === this.get('currentPage');
}).property('number', 'currentPage')
});
App.Router.map(function() {
this.route('posts');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('posts');
}
});
App.PostsRoute = Ember.Route.extend({
model: function() {
var collection = Ember.A();
for(var i = 0; i < 45; i++) {
collection.pushObject(Ember.Object.create({
title: "Post " + (i + 1),
id: i
}));
}
return collection;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment