Как я должен делиться данными между компонентами Ember?

У моего приложения Ember есть маршрут, который содержит 2 разных компонента и один контроллер с шаблоном index.hbs.

Вот как это выглядит:

1) Пользователь может выбрать несколько фильтров из раскрывающихся списков компонента «Фильтр».

2) DataGrid - это отдельный компонент от фильтра.

3) Пользователь может выбрать несколько строк из DataGrid, установив флажки

4) Кнопка «Создать пользовательский отчет» запускает «sendAction» для контроллера маршрута

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

Лучшими практиками Ember являются «Data Down / Actions Up», и из того, что я прочитал, вы не должны пытаться получить доступ к компоненту из контроллера.

Проблема, однако, в том, чтоМетод createCustomReport в контроллере должен иметь доступ ко всем фильтрам, которые были выбраны в компоненте фильтра, а также ко всем строкам, которые были проверены в компоненте grid.

Мой первый инстинкт - установить свойства самого компонента - он должен поддерживать свое собственное состояние - затем получить ссылку на компонент из контроллера, чтобы получить его состояние перед передачей его функции отчета.

Но, видимо, это нет-нет.

Вот мое текущее решение:

Каждый раз, когда я выбираю фильтр, существует sendAction, который всплывает к контроллеру из компонента и устанавливает пользовательское свойство на контроллере.

Кроме того, каждый раз, когда я выбираю флажок в сетке, другой компонент sendAction переходит к компоненту, затем всплывает к контроллеру и устанавливает пользовательское свойство на контроллере для выбранных строк сетки.

Затем, когда я нажимаю «createCustomReport», метод, который запускается в контроллере, получает доступ к свойствам, которые я установил ранее - потому что все они теперь находятся на контроллере.

Так это выглядит примерно так:

import Ember from 'ember';

export default Ember.Controller.extend({

    myFirstFilter: undefined,
    mySecondFilter: undefined,

    actions: {
        createCustomReport() {
            // do something with all those component properties you've been setting
        },

        // These are triggered by the sendAction on the respective component
        firstFilterMethod(myProperty1) {                
            this.set('myFirstFilter', myProperty1.name);
        },

        secondFilterMethod(myProperty2) {               
            this.set('mySecondFilter', myProperty2.name);
        },

        ... etc...


    }
});

Вот моя проблема с этим

Я не напрямую обращаюсь к компонентам из контроллера, но, используя принцип «Действия вверх», я устанавливаю свойства контроллера, которые зависят от вида.

Исходя из фона Sencha ExtJS, где контроллеры имеют ссылки на свои представления, я нахожу это очень странным.

Не получая ссылки на компоненты, я должен отделить свой контроллер от его представлений ... но поскольку все свойства, которые я устанавливаю, обычно бывают в представлении, контроллер в конечном итоге становитсяеще больше связанных к мнению, чем было бы, если бы я просто получить ссылку на компонент.

Это считается «лучшей практикой» в Ember или есть лучший способ для меня получить данные всех этих отдельных компонентов, чтобы запустить метод createCustomReport?

Ответы на вопрос(1)

Ваш ответ на вопрос