EmberJS：分页组件 - 发送带有属性的操作

Question

我创建了一个分页组件(roughly following this tutorial)，但我跳过了“数组控制器”部分并选择将 3 个不同的组件操作直接发送到我的路由，这样我就可以刷新我的模型钩子了。

前两个动作正常工作，因为它们只是被组件触发。

第三个动作不起作用，因为我需要组件向路由上的动作发送一个属性：值，我很困惑如何去做。

我从Ember Component Guides 得到了这个想法，但我似乎执行错了？

路线文件

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();
        }
    }
});

对应的组件动作

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')});
        }
    }
}

组件助手

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

基本上，我要做的是使用组件中pageNumber 的值，设置到路由上的page_number 属性，然后调用refresh()。

我收到一个错误：Uncaught ReferenceError: pageNumber is not defined

console.log(pageNumber); 告诉我在触发操作时该值设置正确在组件内部，所以我知道当我尝试将它发送到路由中时我没有正确处理它.

你能看出我做错了什么吗？

Answer 1

首先，您的路线中的 goToPage 没有采用任何参数，因此 pageNumber 在那里未定义。

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

接下来，您在获取之前在组件中使用 pageNumber，并且以一种尴尬的方式传递它。无需将其包装在对象中。

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

实际上，是什么触发了 goToPage？是{{action "goToPage" 4}} 之类的吗？在这种情况下，您不需要 this.get('pageNumber') 行，而应将其作为参数。