獲取分頁以使用React Komposer

Question

我使用流星1.3.4.1，kurounin：分頁1.0.9和react-komposer 1.8.0（npm軟件包）。

因此，這裏是我的實例作曲家函數內的分頁代碼：

function composer(props, onData) { 
    console.log('loading pages'); 
    const pagination = new Meteor.Pagination(UfcFighters); 

    if(pagination.ready()) { 
    console.log('ready'); 
    const fighters = { 
     columns: [ 
     { width: '5%', label: '', className: '' }, 
     { width: '20%', label: 'Name', className: 'text-center' }, 
     { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' }, 
     { width: '20%', label: 'Weight Class', className: 'text-center' }, 
     { width: '10%', label: 'Status', className: 'text-center' }, 
     { width: '10%', label: 'Rank', className: 'text-center' }, 
     ], 
     data: pagination.getPage(), 
    }; 
    onData(null, { fighters, pagination }); 
    } 
}; 

這是爲陣營Komposer正確使用？我注意到分頁會不斷加載訂閱，並且從來沒有準備好呈現數據。控制檯輸出會反覆說'加載頁面'，但它從不說'準備好'。

任何意見，將不勝感激。

Answer 1

得到通過的kurounin:pagination項目管理員的答案，這裏是被證實的工作我更新的代碼發生反應komposer：

const pagination = new Meteor.Pagination(UfcFighters, { 
    sort: { id: 1 } 
}); 

function composer(props, onData) { 
    const fighterDocs = pagination.getPage(); 

    if(pagination.ready()) { 
    const fighters = { 
     columns: [ 
     { width: '5%', label: '', className: '' }, 
     { width: '20%', label: 'Name', className: 'text-center' }, 
     { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' }, 
     { width: '20%', label: 'Weight Class', className: 'text-center' }, 
     { width: '10%', label: 'Status', className: 'text-center' }, 
     { width: '10%', label: 'Rank', className: 'text-center' }, 
     ], 
     data: fighterDocs, 
    }; 
    onData(null, { fighters, pagination }); 
    } 
}; 

export default composeWithTracker(composer)(FightersList); 

我感動的分頁實例，因爲它的作曲功能之外不斷實例化新的Paginations並讓應用程序停滯不前。現在它運行平穩。

希望這可以幫助別人。

Answer 2

對我來說看起來不錯，我認爲如果分頁沒有準備好，您只需要返回。

function composer(props, onData) { 
    const pagination = new Meteor.Pagination(UfcFighters); 
    if(!pagination.ready()) { return; } 
    const fighters = { 
    columns: [ 
     { width: '5%', label: '', className: '' }, 
     { width: '20%', label: 'Name', className: 'text-center' }, 
     { width: '20%', label: 'Wins/Losses/Draws', className: 'text-center' }, 
     { width: '20%', label: 'Weight Class', className: 'text-center' }, 
     { width: '10%', label: 'Status', className: 'text-center' }, 
     { width: '10%', label: 'Rank', className: 'text-center' }, 
    ], 
    data: pagination.getPage(), 
    }; 
    onData(null, { fighters, pagination }); 
};