Question

我刚刚开始使用elm来获得乐趣，并且遇到了elm-mdl包。截至今天，它仍然没有移植到elm 0.18，所以我使用了这个fork似乎可以完成这项工作，直到移植完成。由于我还在学习榆树（似乎相当迷人的恕我直言:)），我正在努力使一个简单的应用程序编译。这只是在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.18材料设计

1 个答案: