2016-12-13 162 views
0

我剛開始用榆樹玩的,碰到了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" 
} 

我錯過了什麼(猜測它可能與進口有關,但我試圖擺弄那些沒有成功的東西)?

+0

歡迎來到Stack Overflow!你可以先參加[遊覽]並學習[問]一個很好的問題,然後創建一個[mcve]。這使我們更容易幫助你。 – Katie

回答

2

您正在初始化mdlMaterial.Model,這是一個類型別名。類型別名也可以用作函數,這就是爲什麼編譯器認爲你試圖將函數分配給mdl

您應該初始化爲小寫字母模型:mdl = Material.model,這是空的初始狀態。

+0

謝謝!這確實是問題 – user7292889