Как хранить строки и целые числа в списке в elm? - PullRequest
Новая
       18

Как хранить строки и целые числа в списке в elm?

0 голосов
/ 18 февраля 2019

Я программирую Team Creator, в котором пользователь может написать имя игрока и его силу.(Таким образом, если предположить, что пользователь пишет 10 игроков, то сгенерировано 5 команд с 2 игроками в каждой. Я не знаю, как сохранить значения, которые пользователи записывают во вход (Значения должны быть сохранены, поскольку вход снова пуст, когда пользовательнажимает кнопку ввода, чтобы добавить следующего игрока.) Я уже инициализировал переменные и список, но я застрял, когда дело доходит до сохранения значений.

Мой существующий Код Вяза: 

import Browser
import Html exposing (Html, Attribute, button, text, h1, div, input, text)
import Html.Attributes exposing (style)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)




-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL
type alias Player =
  { player : String
  , strength : Int
  }


type alias Model =
  { content : String
  , teams : List Player
  }





init : Model
init =
  { content = ""
  , teams = []
   }



-- UPDATE


type Msg
  = Change String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }



-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ h1 [style "font-family" "impact"] [ text "Team Creator" ]
    , div[] [ input [ placeholder  "? Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff"] [] ]
    , input [ placeholder  "?? Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64"] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "300px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ] ]
    ]

1 Ответ

0 голосов
/ 18 февраля 2019

В Elm, если вы хотите зафиксировать значения input s, вам нужно использовать onInput для каждого поля, которое вас интересует.Они будут отправлять сообщение с текстом update при каждом изменении поля.В конечном итоге вы создадите одно сообщение для каждого поля, которое обновит ваш model новым значением.

Затем, когда пользователь нажмет кнопку для отправки - используйте onClick для обработкиэто - функция update должна преобразовывать и проверять те значения, которые хранятся в model.Если они хороши, внесите их в Player и поместите его в список model.teams!

Отсюда вы можете изменить его, чтобы он давал отзывы об ошибках при отправке или даже в режиме реального времени.Но сосредоточьтесь на том, чтобы заставить вышеупомянутое работать сначала!Рефакторинг дешевый в Вязах.

В официальном руководстве есть раздел Архитектура Вяза и как кнопки , , текстовые поля и формы работают в нем.Это хорошая статья, которая, надеюсь, должна прояснить, как все эти сообщения отправляются и проходят через вашу программу.

...