Аурелия - Require функции для обработки опорного отслеживания конкретного результата фильтра при применении нескольких фильтров?

Question

Есть таблица фильтрации и сортировки, как так:

    <tbody> 
        <tr class="row" 
         repeat.for="repo of repos | 
            filter:searchField.value:filterGitHubTable | 
            sort: {propertyName: column.value, direction: direction.value} | 
            pageData:{currentPage: pageNumber, pageSize:pageSize}"> 
         <td class="col-xs-3">${repo.name}</td> 
         <td class="col-xs-3">${repo.stargazers_count}</td> 
         <td class="col-xs-3">${repo.forks_count}</td> 
         <td class="col-xs-3">${repo.open_issues}</td> 
        </tr> 
       </tbody> 

В моем пейджера коде ниже его установки в качестве

<pagination model.bind="repos" 
      page-size.bind="pageSize" 
      pageclick.delegate="handlePageClick($event)" 
      pagination-class="pg-bluegrey"></pagination> 

Как сделать нумерацию страниц элемент модели привязки к опорному результата фильтра 'после сортировки' but ', прежде чем он сделает следующий фильтр для данных разбивки на страницы?

Причина заключается в том, что у меня есть данные разбиения на страницы, у меня нет всего результата фильтра для связывания с элементом разбиения на страницы. Как мне отслеживать нумерацию страниц при применении фильтра на результат таблицы?

Answer 1

Вот небольшой уловка, которую вы могли бы использовать здесь. Вы можете использовать элемент HTML hidden для сортировки «удержания» в промежуточной версии ваших данных. Aurelia позволяет присоединять произвольные атрибуты к любому элементу, и используя атрибут ref, мы можем прикрепить сам элемент к нашей модели viewmodel. Затем мы можем получить доступ к любым данным, которые мы привязали к этому элементу, в любом месте, которое мы хотим в нашем представлении или в режиме просмотра. Проверьте это:

<input type="hidden" ref="filteredAndSorted" 
     data.bind="repos | 
        filter:searchField.value:filterGitHubTable | 
        sort: {propertyName: column.value, direction: direction.value}" /> 
<table> 
    <tbody> 
    <tr class="row" repeat.for="filteredAndSorted.data | 
           pageData:{currentPage: pageNumber, pageSize:pageSize}"> 
     <td class="col-xs-3">${repo.name}</td> 
     <td class="col-xs-3">${repo.stargazers_count}</td> 
     <td class="col-xs-3">${repo.forks_count}</td> 
     <td class="col-xs-3">${repo.open_issues}</td> 
     </tr> 
    </tbody> 
</table> 

<pagination model.bind="filteredAndSorted.data" 
      page-size.bind="pageSize" 
      pageclick.delegate="handlePageClick($event)" 
      pagination-class="pg-bluegrey"> 
</pagination> 

Я держу пари, это то, что вам поможет. Извините, на это ушло так много времени, чтобы ответить, я был очень занят последние несколько дней, тренируя Aurelia.