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

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返回 ( model, Cmd msg )而不仅仅是 model .这是您错误的根本原因，因为您有 update和 init返回 ( 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  
        }