类型不匹配 - 沙箱的第一个参数不是我所期望的

Question

我正在尝试添加订阅，因为我有一个下拉菜单，这有助于确保当您在下拉菜单之外单击时自动关闭下拉菜单。这样做时，我不得不更改 model 以及我的 update.

这个 link（将带您到 Elm Bootstrap 站点）是我正在使用的下拉列表，它使用 Bootstrap 4.

我收到错误

The 1st argument to sandbox is not what I expect:

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

This argument is a record of type:
{ init : ( Model, Cmd Msg )
, update : Msg -> Model -> ( Model, Cmd Msg )
, view : Model -> Html Msg
}
But sandbox needs the 1st argument to be:
{ 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

这里有三点不同：

init 有一个参数，flags，它可以是任何东西，运行时会根据它的类型来解释。对于您的目的，只需使用 () 就足够了（这实际上是 sandbox 所做的），但请参阅 the flags section of the guide 了解更多详细信息。
init 和 update returns ( model, Cmd msg ) 而不仅仅是 model。这是你错误的根本原因，因为你有 update 和 init 函数，return ( model, Cmd msg ) 就像 element 所期望的那样，但尝试将它们提供给sandbox。这让编译器不高兴，因为它认为 model 应该是 ( Model, Cmd msg ) 而不是 Model.
element 需要一个附加的 subscriptions 函数，您已经定义了该函数，但由于沙箱不接受它，因此目前没有对其进行任何操作。

将所有这些放在一起，替换为以下 main 函数应该适合您：

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

类型不匹配 - 沙箱的第一个参数不是我所期望的

Type Mismatch - 1st argument to sandbox is not what I expect

typeerror

elm

elm-architecture