Как вы динамически создаете входные данные в Elm?

Я хочу создать кнопку, которая при нажатии добавляет в форму новый ввод (или текстовое поле).


person Robin Green    schedule 01.12.2012    source источник


Ответы (2)


Если вы хотите, чтобы текстовое поле добавлялось при каждом нажатии кнопки, это означает, что вы хотите, чтобы количество отображаемых текстовых полей было равно количеству нажатий кнопки. Мы можем создать сигнал, сообщающий нам, как часто была нажата кнопка, используя countIf id в сигнале clicked кнопки¹.

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

Так что теперь мы можем просто использовать lift, чтобы подключить эту функцию к нашему сигналу, который подсчитывает количество нажатий кнопки, объединить это с функцией flow, и вуаля, у нас есть кнопка, которая динамически создает входные данные.

(btn, clicked) = Input.button "Click me!"

-- Count how often the clicked signal is true
clicks = countIf id clicked

main = lift2 flow (constant down) $ lift nInputs clicks

nInputs n =
  let helper n acc =
    if n<=0 then btn : acc
    else
      -- Input.textField returns a pair containing the field as well as a signal
      -- that you can use to access the field's contents. Since I don't actually
      -- ever do anything with the contents, I just ignore the signal here.
      -- In your real code, you'd probably want to keep the signal around as well.
      let (field, _) = Input.textField $ "input " ++ (show n)
      in helper (n-1) $ field : acc
  in helper n []

¹ Простое использование count будет подсчитывать, как часто меняется сигнал. Поскольку каждый щелчок приводит к тому, что значение сигнала изменяется на истинное, а затем обратно на ложное, это будет учитывать 2 изменения за щелчок. Используя countIf id, мы подсчитываем только количество раз, когда сигнал является истинным, и, следовательно, количество кликов.

person sepp2k    schedule 28.12.2012
comment
Обратите внимание, что Elm не поддерживает сигналы сигналов. Если вы хотите сохранить входной сигнал текстовых полей, вы можете использовать библиотеку Automaton: elm- lang.org/docs/Automaton.elm - person thSoft; 10.01.2013

Начиная с Elm 0.8, это действительно можно сделать. См. объявление о выпуске, группы ввода раздел онлайн-справочника и пример кода.

person thSoft    schedule 17.06.2013