A half baked ember.js pagination solution using the v2 router api

half_baked_pagination.js

PersonApp = Ember.Application.create();
PersonApp.SearchField = Ember.TextField.extend({
    keyUp: function(e) {
        var search = this.get('value');
        this.get('controller.target').send('searchUsers', {match:search});
    }
});

PersonApp.PersonView = Ember.View.extend({
    templateName: 'person',
    addPerson: function(event) {
        var username = event.context.username;
        if (username) {
            this.get('controller.target').send('addPerson', username);
            event.context.set('username', '');
        }
    }
});

PersonApp.Person = DS.Model.extend({
    username: DS.attr('string')
});

PersonApp.Store = DS.Store.extend({
    revision: 10,
    adapter: DS.Adapter.create({
        createRecord: function(store, type, object) {
            console.log(object.toJSON({ associations: true }));
        },
        findAll: function() {
            var one = PersonApp.Person.createRecord({id:1,username:'one'});
            var two = PersonApp.Person.createRecord({id:2,username:'two'});
            var three = PersonApp.Person.createRecord({id:3,username:'three'});
            var four = PersonApp.Person.createRecord({id:4,username:'four'});
            return [one,two,three,four];
        }
    })
});

PersonApp.PaginationView = Ember.View.extend({
    templateName: 'pagination',

    tagName: 'li',
    spanClasses: 'paginator pageNumber',

    isActive: function() {
        var currentPage = this.get('parentView.controller.currentPage');
        var page_id = this.get('content.page_id');

        if(currentPage) {
            return currentPage.toString() === page_id.toString();
        } else {
            return false;
        }
    }.property('parentView.controller.currentPage')
});

PersonApp.PersonController = Ember.ArrayController.extend(Ember.FilterSortSliceMixin, {
    content: [],
    sortBy: 'id',
    itemsPerPage: 2,
    paginationRoute: 'pagination',
    sortableRoute: 'sort'
});

PersonApp.Router.map(function(match) {
    match("/").to("person");
    match("/page/:page_id").to("pagination");
});

PersonApp.PaginationRoute = Ember.Route.extend({
    selectedPage: 3, //to simulate actually switching the page #halfBaked
    renderTemplates: function() {
        var controller = this.controllerFor('person');
        this.render('person', {
            into: 'application',
            outlet: 'person',
            controller: controller
        });
    },
    model: function(params) {
        //this method is never invoked ?why #todo
        this.selectedPage = params.page_id;
        return PersonApp.Person.find(); //just in case it does ...
    },
    setupControllers: function(controller, page_id) {
        this.controllerFor('person').set('selectedPage', this.selectedPage);
    }
});

PersonApp.PersonRoute = Ember.Route.extend({
    setupControllers: function(controller) {
        controller.set('content', PersonApp.Person.find());
    }
});​

Thanks Toran for putting this out. I am learning emberjs and I don't understand line 5 of the code and how 'send' works in the context of passing it an undefined event that is 'searchUsers' and kindly explain how that works . Previously by looking at another code by Trek, I thought you use 'send' to call events that are already defined on the router but it seems i didnt fully understand 'send' based on how you used it in your code. This is because I checked both your router and controller and there was no event with the name 'searchUsers'.

  this.get('controller.target').send('searchUsers', {match:search});

This is the trek's use of 'send':

Trek uses send here

 https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/app/views/edit_todo_textfield.js#L17

the action or event passed to the 'send' call above is defined here

 https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences/blob/master/app/routes/todos_route.js#L67

Thanks for your explanation.