Тип Несоответствие - 1-й аргумент в песочнице не то, что я ожидаю

Question

Я пытаюсь добавить подписки, так как у меня есть раскрывающийся список, это помогает гарантировать, что раскрывающиеся списки автоматически закрываются, когда вы нажимаете вне их. После этого мне пришлось изменить model как и мой update,

Эта ссылка (приведет вас на сайт Boosttrap вяза) - это раскрывающийся список, с которым я работаю и использует Bootstrap 4.

Я получаю ошибку

1-й аргумент sandbox это не то, что я ожидаю

295 | Browser.sandbox 296 |> {init = initialModel 297 |>
, update = update 298 |>, view = view 299 |>}

Этот аргумент является записью типа:

{ init : ( Model, Cmd Msg )
, update : Msg -> Model -> ( Model, Cmd Msg )
, view : Model -> Html Msg
}

Но sandbox нужен первый аргумент:

{ init : ( Model, Cmd Msg )
, update : Msg -> ( Model, Cmd Msg ) -> ( Model, Cmd Msg )
, view : ( Model, Cmd Msg ) -> Html Msg
}

Псевдоним Модель

type alias Model =
    { currentNumber : Int, clicks : Int, outputList : List(String), uniqueValues : Dict Int Int, firstNumber : String, secondNumber : String, myDropState : Dropdown.State, items : List String, selectedItem : String, dictKeyToRemove : String,
    modalVisibility : Modal.Visibility  }

Начальная модель

initialModel : (Model, Cmd Msg)
initialModel =
    ({ currentNumber = 0, clicks = 0, outputList = [""], uniqueValues = Dict.empty, firstNumber = "", secondNumber = "", myDropState = Dropdown.initialState, items = ["Small", "Medium", "Large"], selectedItem = "Small", dictKeyToRemove = "",
    modalVisibility = Modal.hidden }, Cmd.none)

Главный

main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel           
        , update = update      
        , view = view   
        }

Подписки

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ Dropdown.subscriptions model.myDropState DropMsg ]

Обновить

update : Msg -> Model -> ( Model, Cmd Msg)
update msg model =
    case msg of   
        DropMsg state ->
            ({model | myDropState = state }, Cmd.none)

Я не уверен, что мне не хватает в этот момент, я попытался изменить аргумент без удачи.

Answer 1

Browser.sandbox создаст простую и очень ограниченную программу. Для раскрывающегося списка требуются дополнительные возможности, а именно подписки, что означает, что вам необходимо использовать либо Browser.element или же Browser.document вместо.

Тип Browser.element является:

element :
    { init : flags -> ( model, Cmd msg )
    , view : model -> Html msg
    , update : msg -> model -> ( model, Cmd msg )
    , subscriptions : model -> Sub msg
    }
    -> Program flags model msg

По сравнению с Browser.sandbox:

sandbox :
    { init : model
    , view : model -> Html msg
    , update : msg -> model -> model
    }
    -> Program () model msg

Здесь есть три различия:

1. init принимает аргумент, flags, который может быть чем угодно и будет интерпретироваться средой выполнения в соответствии с его типом. Для вашей цели просто используя () должно быть достаточно (что по сути то, что sandbox делает), но см. раздел флагов руководства для более подробной информации.

2. init а также update возвращается ( model, Cmd msg ) вместо просто model, Это коренная причина вашей ошибки, потому что у вас есть update а также init функции, которые возвращают ( model, Cmd msg ) как element можно было бы ожидать, но попробуйте кормить их sandbox, Это делает компилятор несчастным, потому что он думает, что model должно быть ( Model, Cmd msg ) вместо просто Model,

3. element ожидает дополнительного subscriptions функция, которую вы определили, но в настоящее время ничего не делаете, так как песочница не принимает ее.

Собираем все это вместе, подставляя следующее main Функция должна работать для вас:

main : Program () Model Msg
main =
    Browser.element
        { init = \() -> initialModel           
        , update = update      
        , view = view
        , subscriptions = subscriptions  
        }