CXJS с использованием параметров в контроллере

Question

Как я могу использовать параметры в контроллере функционального компонента?

как https://docs.cxjs.io/concepts/functional-components

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

Как я могу получить доступ к этим параметрам в контроллере, как расширенный пример документов:

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={MyController}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;




    class MyController extends Controller {
        onInit() {
            //use Parameter chartStyle in code.
    var myparameter = {{chartStyle}}; //??? < how do i get the value 
    ....
        }

    }

Answer 1

Вы можете передать параметры в контроллер:

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={{ type: MyController, chartStyle }}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;

Answer 2

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

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={getController(chartStyle)}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;

// controller factory
function getController(style) { 
    return class MyController extends Controller {
        onInit() {
            // now `chartStyle` is available as `style` within controller via function closure
            console.log(style);
            ....
        }
    };
}