Question

我正在尝试添加订阅，因为我有一个下拉菜单，这有助于确保当您在下拉菜单中单击时，下拉列表会自动关闭。为此，我必须同时更改model和update。

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

我遇到错误

sandbox的第一个参数不是我期望的：

295 | Browser.sandbox 296 |> {init = initialModel 297 |>
  ，更新=更新298 |>，查看=查看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

这里有三个区别：

init带有参数flags，该参数可以是任何参数，运行时将根据其类型对其进行解释。出于您的目的，仅使用()就足够了（本质上就是sandbox的用途），但请参阅the flags section of the guide了解更多详细信息。
init和update返回( model, Cmd msg )而不是model。这是造成错误的根本原因，因为您有update和init个函数，它们会按( model, Cmd msg )的期望返回element，但尝试将它们提供给{{1} }。这使编译器不满意，因为它认为sandbox应该是model而不是( Model, Cmd msg )。
Model需要一个附加的element函数，该函数已定义，但由于沙箱不接受而目前未做任何事情。

将所有内容放在一起，替换以下subscriptions函数应该对您有用：

main

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

1 个答案: