Skip to main content

Проекция итераторов

Если компонент создает дочерние компоненты на основе итератора, то используется проекция скоупа

По умолчанию свойства элементов коллекции проецируются прямо на на скоуп, т.е. дочерние элементы имеют доступ к свойствам через переменые скоупа

export default () => {
return {
defaultItem: {
injections: {
text: $ => $.title // свойство доступно прямо из скоупа
}
},
injections: {
data: () => observable([{title: 'Hello'}])
},
reactions: {
data: (v) => ({items: iterator(v)})
}
}
}

Однако можно спроецировать элемент коллекции на новую (канальную) переменную в дочернем скоупе.

export default () => {
return {
defaultItem: {
injections: {
text: $ => $.__item.title // свойство доступно через канальную переменную
}
},
injections: {
data: () => observable([{title: 'Hello'}])
},
reactions: {
data: (v) => ({items: iterator(v, '__item')}) // указываем канальную переменную
}
}
}

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

export default () => {
return {
defaultItem: {
reactions: {
data: v => ({text: v.title})
}
},
injections: {
data: () => observable([{title: 'Hello'}])
},
reactions: {
data: (v) => ({items: iterator(v, 'data')}) // переменная будет иметь то же имя, что и родительская
}
}
}

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

info

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