Проекция итераторов
Если компонент создает дочерние компоненты на основе итератора, то используется проекция скоупа
По умолчанию свойства элементов коллекции проецируются прямо на на скоуп, т.е. дочерние элементы имеют доступ к свойствам через переменые скоупа
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
У каналирования этого есть еще одно следствие - данные становятся хорошо изолированными, т.к. каналы сложно перепутать в отличие от набора свойств скоупа