Question

我创建了一个分页组件(roughly following this tutorial)，但是我跳过了＃34;数组控制器＆＃34; part并选择直接向我的路线发送3个不同的组件动作，所以我可以刷新我的模型钩子。

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

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

我从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')行，而应该将其作为参数。

EmberJS：分页组件 - 发送包含属性的动作

1 个答案: