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

Question

I am trying to add subscriptions as I have a dropdown, this helps ensure that the dropdowns automatically close when you click outside of them. On doing so, I had to change the model as well as my update.

This link (will take you to the Elm Bootstrap site) is the dropdown I am working with which is using Bootstrap 4.

Error I am getting

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
}

Alias Model

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  }

Initial Model

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

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

Subscriptions

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

Update

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

I am not sure what I am missing at this point, I have tried changing the argument with no luck.

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 )而不是just Model。

3. element需要一个subscriptions已定义的附加函数，但由于沙箱不接受它，因此当前不执行任何操作。

将所有这些放在一起，替换以下main功能将为您工作：

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