EmberJS：分頁組件-發送帶有屬性的動作

Question

我創建了一個分頁組件（大致在本教程之后） ，但是我跳過了“數組控制器”部分，而是選擇將3個不同的組件動作直接發送到我的路線，因此可以刷新模型鈎子。

前兩個動作正常工作，因為它們只是由組件觸發的。

第三個動作不起作用，因為我需要組件向路由上的動作發送一個property：value，而我對此卻感到困惑。

我是從《 Ember組件指南》中得到這個想法的，但是看來我在實現錯誤嗎？

路線文件

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')行，而應將其作為參數。