Cycle.js - Как получить длину коллекции в элементе коллекции - PullRequest
Новая
       13

Cycle.js - Как получить длину коллекции в элементе коллекции

0 голосов
/ 13 июня 2018

Я пытаюсь добавить поведение исключительно к последнему элементу в списке в Cycle.js.Я попытался использовать цикл-луковицу, чтобы создать коллекцию следующим образом: 

const List = makeCollection({
  item: Child,
  itemKey: (childState, index) => String(index),
  itemScope: key => key,
  collectSinks: instances => {
    return {
      onion: instances.pickMerge('onion'),
      DOM: instances.pickCombine('DOM')
        .map(itemVNodes => ul(itemVNodes))
    }
  }
});

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

Что-то мне не хватает?

1 Ответ

0 голосов
/ 13 июня 2018

Вы можете использовать линзы с makeCollection.Помните, что он возвращает нормальный компонент Cycle.js, который вы можете изолировать.Поэтому, если вы хотите добавить логическое значение isLast, вы можете сделать это следующим образом: 

function omit(obj, key) {
    let tmp = { ...obj }; //Copy the object first
    delete tmp[key];
    return tmp;
}

const listLens = {
   get: stateArray => stateArray.slice(0, -1).concat({
            ...stateArray[stateArray.length - 1],
            isLast: true
        }),
   set: (stateArray, mappedArray) => mappedArray.slice(0, -1)
           .concat(omit(mappedArray[mappedArray.length - 1], 'isLast'))
};

const List = isolate(
    makeCollection({
        item: Child,
        itemKey: (childState, index) => String(index),
        itemScope: key => key,
        collectSinks: instances => ({
            onion: instances.pickMerge('onion'),
            DOM: instances.pickCombine('DOM')
                .map(itemVNodes => ul(itemVNodes))
        })
    }),
    { onion: listLens, '*': null }
);

В качестве примечания: если вы хотите применить линзу к каждому отдельному элементу, вы также можете сделать это,со свойством itemScope.Например 

itemScope: key => ({ onion: myLens, '*': key })
...