EmberJS: Pagination Component - Sending an action with a property in it

Question

I created a pagination component, (roughly following this tutorial), but i skipped the "array controller" part and opted to send 3 different component actions directly to my route, so i can refresh my model hook.

The first two actions work correctly because they are just being triggered by the component.

The third action is not working, because I need the component to send a property:value to the action on the route and i am confused how to do it.

I got the idea from the Ember Component Guides but it seems I am implementing it wrong?

The Route File

export default Ember.Route.extend({
    page_size: 20,
    page_number: 1,

    model: function() {
        return View.find({page_size: this.page_size, page_number: this.page_number});
    },

    actions: {
        goToNext: function() {
            this.page_number += 1;
            return this.refresh();
        },
        goToPrev: function() {
            this.page_number -= 1;
            return this.refresh();
        },
        goToPage: function() {
            this.set('page_number', pageNumber);
            return this.refresh();
        }
    }
});

Corresponding Component Actions

actions: {
    goToNext: function() {
        if (this.get('hasNext')) {
            this.sendAction('goToNext');
        }
    },
    goToPrev: function() {
        if (this.get('hasPrevious')) {
            this.sendAction('goToPrev');
        }
    },
    goToPage: function(pageNumber) {
        console.log(pageNumber);
        if (pageNumber >= 1 && pageNumber <= this.get('lastPage')) {
            this.sendAction('goToPage', {pageNumber: this.get('pageNumber')});
        }
    }
}

The Component Helper

{{pagination-controls
    page=page_number
    pages=total_pages
    goToNext="goToNext"
    goToPrev="goToPrev"
    goToPage="goToPage"
}}

Basically, what I am trying to do is use the value of pageNumber from the component, to set into the page_number property on the route and then call refresh().

I am getting an error of: Uncaught ReferenceError: pageNumber is not defined

console.log(pageNumber); tells me that the value is set correctly inside the component when the action is triggered, so I know that I am not handling it correctly when i try to send it up into the route.

Can you see what I am doing wrong?

Novaugust Novaugust · Accepted Answer · 2014-08-20T14:07:14

First off, your goToPage in your route isn't taking any parameters, so pageNumber is undefined there.

//the route 
    goToPage: function(pageNumber) {
        this.set('page_number', pageNumber);
        return this.refresh();
    }

Next, you're using pageNumber in your component before getting it, and you're passing it in an awkward way. No need to wrap it in an object.

//the component
goToPage: function() {
    var pageNumber = this.get('pageNumber');
    if (pageNumber >= 1 && pageNumber <= this.get('lastPage')) {
        this.sendAction('goToPage', pageNumber);
    }
}

Actually, what's triggering goToPage? is it something like {{action "goToPage" 4}}? In which case, you don't need the this.get('pageNumber') line, and should instead take it as a param.

EmberJS: Pagination Component - Sending an action with a property in it

1 Answers