榆木0.18material设计

Question

我只是为了好玩才开始使用 elm，并遇到了 elm-mdl 包。到今天为止，它仍然没有移植到 elm 0.18，所以我使用这个 fork 似乎在移植完成之前完成了这项工作。由于我仍在学习 elm（恕我直言，这似乎很有趣 :)），我正在努力编译一个简单的应用程序。这只是在 elm-lang 的官方指南文档（HTTP 文档）中找到的一个稍微改变的示例。

代码如下：

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http
import Json.Decode as Decode
import Material.Spinner as Loading
import Json.Decode exposing (succeed)
import Material.Button as Button exposing (..)
import Material
import Json.Decode exposing (succeed)

main =
  Html.program
    { init = (init, getRandomGif "hello world")
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

type alias Model =
  { topic : String
  , gifUrl : String
  , fetching : Bool
  , mdl : Material.Model
  }

init : Model
init =  { topic = "", gifUrl = "waiting.gif", fetching = False, mdl = Material.Model }

type Msg
  = MorePlease
  | NewGif (Result Http.Error String)
  | NewTopic String
  | ImageLoaded
  | Mdl (Material.Msg Msg)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      ({ model | fetching = True }, getRandomGif model.topic)

    NewGif (Ok newUrl) ->
      (Model model.topic newUrl model.fetching model.mdl, Cmd.none)

    NewGif (Err _) ->
      (model, Cmd.none)

    NewTopic newTopic ->
       ({ model | topic = newTopic }, Cmd.none)

    ImageLoaded ->
        ({ model | fetching = False }, Cmd.none)

    Mdl message ->
              Material.update message model

view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Topic :", onInput NewTopic ] []
    , Button.render Mdl [0] model.mdl
      [ Button.raised
      , Button.ripple
      , Button.onClick MorePlease
      ]
      [ text "Fetch new"]
    , br [] []
    , img [src model.gifUrl, on "load" (succeed ImageLoaded), style [ ( "visibility", visibilityFromBool model.fetching ) ]] []
    , Loading.spinner [ Loading.active model.fetching ]
    , br [] []
    ]

subscriptions : Model -> Sub Msg
subscriptions model = Sub.none

getRandomGif : String -> Cmd Msg
getRandomGif topic =
  let url = "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ topic
  in Http.send NewGif (Http.get url decodeGifUrl)

decodeGifUrl : Decode.Decoder String
decodeGifUrl =
  Decode.at ["data", "image_url"] Decode.string

visibilityFromBool : Bool -> String
visibilityFromBool bool = if bool then "hidden" else "visible"

但我收到以下错误：

The definition of `init` does not match its type annotation.
29| init : Model
30|>init =  { topic = "", gifUrl = "waiting.gif", fetching = False, mdl = Material.Model }
The type annotation for `init` says it is a: 

Main.Model

But the definition (shown above) is a:
  { fetching : Bool
, gifUrl : String
, mdl :
     Parts.Indexed (List Int) Button.Model
      -> Parts.Indexed (List Int) Material.Textfield.Model
      -> Parts.Indexed (List Int) Material.Menu.Model
      -> Maybe (Material.Snackbar.Model Int)
      -> Material.Layout.Model
      -> Parts.Indexed (List Int) Material.Toggles.Model
      -> Parts.Indexed (List Int) Material.Tooltip.Model
      -> Parts.Indexed (List Int) Material.Tabs.Model
      -> Material.Model
  , topic : String
   }

 Hint: Problem in the `mdl` field. It looks like a function needs 8 more
arguments.

Detected errors in 1 module.

好像Material.Model是一个需要8个参数的函数(???)

总之elm的内容就是这些-package.json :

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "Fresheyeball/elm-guards": "1.0.1 <= v < 2.0.0",
        "MichaelCombs28/elm-mdl": "1.0.1 <= v < 2.0.0",
        "elm-lang/core": "5.0.0 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0",
        "elm-lang/http": "1.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

我错过了什么（猜测它可能与进口有关，但我尝试摆弄那些没有成功）？

Answer 1

您正在将 mdl 初始化为 Material.Model，这是一个类型别名。类型别名也可以用作函数，这就是编译器认为您试图将函数分配给 mdl.

的原因

您应该改为初始化为小写模型：mdl = Material.model，这是空的初始状态。

榆木0.18material设计

Elm 0.18 material design

elm

material-design