Связь фильтрации и поиска со списком

В списках можно отображать не все элементы, а только соответствующие указанным условиям фильтрации в строке поиска или на панели фильтра. Для этого необходимо обеспечить связь списка, строки поиска и объединенного фильтра между собой.

Пример
Исходный код

Для организации поиска и фильтрации в списке используют контрол-контроллер Controls/browser:Browser. Он обеспечивает взаимодействие между взуальными контролами через контролы-контейнеры, которые получают опции от контроллера и передают их контролам.

Например, Controls/browser:Browser связывает список со строкой поиска таким образом:

  • При вводе в строку поиска Controls/search:InputContainer оповещает Controls/browser:Browser через всплывающее событие о необходимости поиска;
  • Controls/browser:Browser инициирует запрос данных по значению из строки поиска;
  • Полученные данные передаются через контекст в Controls/list:Container;
  • Controls/list:Container передаёт данные в списочный контрол.

Чтобы связать список, объединенный фильтр и строку поиска, необходимо:

  1. Добавить на страницу строку поиска:
    <!-- WML -->
    <Controls.search:Input />
  2. Обернуть строку поиска в контейнер Controls/search:InputContainer:
    <!-- WML -->
    <Controls.search:InputContainer>
       <Controls.search:Input />
    </Controls.search:InputContainer>
  3. Добавить на страницу объединенный фильтр:
    <!-- WML -->
    <Controls.filter:View />
  4. Обернуть объединенный фильтр в контейнер Controls/filter:ViewContainer:
    <!-- WML -->
    <Controls.filter:ViewContainer>
        <Controls.filter:View />
    </Controls.filter:ViewContainer>
  5. Добавить на страницу списочный контрол:
    <!-- WML -->
    <Controls.list:View />
  6. Обернуть списочный контрол в контейнер Controls.list:Container:
    <!-- WML -->
    <Controls.list:Container>
        <Controls.list:View />
    </Controls.list:Container>
  7. Обернуть содержимое страницы в Controls/browser:Browser:
    <!-- WML -->
    <Controls.browser:Browser 
       source="{{_viewSource}}" filterButtonSource="{{_filterSource}}" >
        <div>
            <Controls.search:InputContainer>
                <Controls.search:Input />
            </Controls.search:InputContainer>
            <Controls.filter:ViewContainer>
                <Controls.filter:View />
            </Controls.filter:ViewContainer>
            <Controls.list:Container>
                <Controls.list:View />
            </Controls.list:Container>
        </div>
    </Controls.browser:Browser>