我剛開始用榆樹玩的,碰到了elm-mdl包。截至今天,它仍然沒有移植到榆樹0.18,所以我用這個fork似乎完成這項工作,直到移植完成。由於我仍然在學習榆樹(看起來相當迷人的恕我直言)過程中,我努力做一個簡單的應用程序編譯。這只是在elm-lang的官方指南文檔(HTTP之一)中發現的稍微改變的示例。榆木0.18材質設計
下面是代碼:
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"
}
我錯過了什麼(猜測它可能與進口有關,但我試圖擺弄那些沒有成功的東西)?
歡迎來到Stack Overflow!你可以先參加[遊覽]並學習[問]一個很好的問題,然後創建一個[mcve]。這使我們更容易幫助你。 – Katie