JavaScript for Line of Business Applications

This time, I would like to show you how to add a simple pagination helper to your Ember.js application.

For this example, I will be using Rails + Solr for the backend and Ember.js as my frontend framework.

I am doing this with Rails and Solr, but you can do it using other backend frameworks, as long as the JSON's response resembles what we have here:

Before we start, there's something I want to say, just in case you are using the ember-rails gem. 

I have created a new Model, Serializer and Controller on Rails. So, all this means that I'm going to need a newEmber.js model, in order to get it working. Remember, the store is in charge of finding the models through the adapter. It will communicate with the new Rails controller to serialize the new model.

From my point of view, we can have many paginated collections inside an application. So, one way to avoid code duplication is the use of Ember.js Mixins. 

Previously, we gave an example of a super simple search results widget that utilized jsonp and AngularJS. Since then, we’ve polished our Angular skills quite a bit. Enough so, that I was able to throw together this instant search widget, in less than an hour. Angular truly is an amazing UI tool.

Below is the source for the widget (and here it is on github and jsfiddle). Like our previous example, we use Angular directives to create a custom HTML element. Unlike our previous example, we’ve allowed some interactivity with a simple input tag. Enjoy!