Elm `update` не выполняет оператор case при изменении значения раскрывающегося списка - PullRequest
Новая
       13

Elm `update` не выполняет оператор case при изменении значения раскрывающегося списка

3 голосов
/ 11 июня 2019

Я новичок в Вязов. Я не могу вызвать функцию обновления после изменения значения раскрывающегося списка.

Сценарий: У меня есть два выпадающих списка Grade и Environment. То, что я хочу, это когда значения раскрывающегося списка Grade меняются, параметры раскрывающегося списка Environment будут зависимо меняться.

Например, если значение Grade равно 3, параметры Environment должны измениться на Imagine Math

    gradeDropdown : String -> List String -> Html Msg
    gradeDropdown grade grades =
        let
            buildOption =
                gradeOption grade
        in
            select [ class "importWizard--gradeSelection", name "gradeSelection", onChange (UpdateStudent Grade) ]
                (map buildOption grades)

    gradeOption : String -> String -> Html Msg
    gradeOption optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

    environmentDropdown : Model -> String -> List String -> String -> Html Msg
    environmentDropdown model learningEnvironment learningEnvironments selectedGrade =
        let
            buildOption =
                environmentOption model learningEnvironment
            blueprint_grades = ["PreKindergarten", "Kindergarten", "1"]
            environmentDropdownOption =
              if (selectedGrade == "" || (List.member selectedGrade blueprint_grades)) then
                ["Blueprint"]
              else if (selectedGrade == "2") then
                learningEnvironments
              else
                ["Imagine Math"]
        in
            select [
              class "importWizard--learningEnvironmentSelection"
              , name "learningEnvironmentSelection"
              , onChange (UpdateStudent LearningEnvironments)
            ]
            (map buildOption environmentDropdownOption)

    environmentOption : Model -> String -> String -> Html Msg
    environmentOption model optSelectedVal temp =
        let
            optSelected =
                temp == optSelectedVal
        in
            option [ value temp, selected optSelected ] [ text temp ]

А в Обновление 

update : Flags -> Msg -> Model -> ( Model, Cmd Msg )
    update flags message model =
        case message of
            UpdateStudent updateType newValue ->
                let
                    validate =
                        validateStudent flags validatableFieldsForScreen
                in
                    case updateType of
                        LastName ->
                            ( validate { model | lastName = newValue } <| Just LastNameField, Cmd.none )

                        FirstName ->
                            ( validate { model | firstName = newValue } <| Just FirstNameField, Cmd.none )

                        Sin ->
                            ( validate { model | sin = newValue } <| Just SinField, Cmd.none )

                        Grade ->
                            ( validate { model | grade = newValue, selectedGrade = newValue } Nothing, Cmd.none )

                        LearningEnvironments ->
                            ( validate { model | learningEnvironments = newValue } Nothing, Cmd.none )

Вид: 

, td [ class wizardTableInput ] [ gradeDropdown model.grade flags.grades ]
, td [ class wizardTableInput ] [ environmentDropdown model model.learningEnvironments flags.learningEnvironments model.selectedGrade ]

В этом коде значение раскрывающегося списка среды изменяется, однако значение модели не обновляется. Из того, что я понимаю, я вижу, что идентификатор выпадающего списка среды перерисовывается, но он не обновляет значение модели learningEnvironments. Это означает, что она не выполняет функцию update, соответствующую LearningEnvironments.

1 Ответ

2 голосов
/ 12 июня 2019

select виджеты, где изменение параметров является одним из вариантов использования для Html.Keyed.node

Используйте вспомогательную функцию, подобную приведенной ниже: 

keyedSelect : (String -> a) -> String -> List ( String, String ) -> Html a
keyedSelect message selectedValue kvs =
    let
        toOption ( k, v ) =
            ( k
            , option
                [ value k
                , selected (k == selectedValue)
                , disabled (k == "-1")
                ]
                [ text v ]
            )
    in
    Keyed.node "select"
        [ class "form-control", onChange message ]
        (List.map toOption kvs)

У меня обычно есть первый параметр "Please select Foo" со значением -1, если пользователь никогда не выбирал ни один из параметров. Вот почему код проверяет -1 и отключает эту опцию. Вы можете удалить атрибут disabled, если он вам не нужен.

...