2016-10-10 11 views
8

मैं एल्म के लिए काफी नया हूं, लेकिन धीरे-धीरे इससे परिचित हो रहा हूं। मैं कुछ सरल एचटीपी अनुरोध कर रहा हूं, जो हर पहलू में सफल होते हैं (मुझे प्रदर्शित करने के लिए डेटा प्राप्त होता है)एएमएम एचटीपी अनुरोध पर इनिट

इस पल के लिए मैं केवल अपने fetchData को ट्रिगर करने के लिए प्राप्त कर सकता हूं, मैं इसे प्रारंभ करना चाहता हूं init, लेकिन मुझे इसके चारों ओर अपने सिर लपेटने में परेशानी हो रही है।

.... यहाँ मेरी fetchData समारोह है:

fetchData : Cmd Msg 
fetchData = 
    Http.get repoInfoListDecoder "http://example/api" 
    |> Task.mapError toString 
    |> Task.perform ErrorOccurred DataFetched 

जो वर्तमान में एक onClick ईवेंट से ध्यान में रखते हुए को गति प्रदान किया जाता है:

..... 
, button [ onClick FetchData ] [ text "Load Data" ] 
..... 

मैं एक बटन से डेटा का अनुरोध से बचना चाहते हैं , इसके बजाय मैं ऐप शुरू होने पर डेटा लोड करना चाहता हूं।

init = 
    let 
    model = 
     { message = "Welcome", repos = [] } 
    in 
    model ! [] 

और मेरे अद्यतन (छीन की तरह ... उदाहरण के sakes के लिए)::

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
    NoOp -> 
     model ! [] 
    ........... 
    FetchData -> 
     { model | message="hi" } ! [fetchData] 
    ........... 
    DataFetched repos -> 
     { model | repos = repos, message = "The data has been fetched!" } ! [] 

इस समझ में आता है करता है यहाँ मेरी init है? ऐप लोड होने पर मुझे fetchData प्रारंभ करने में कठिनाई हो रही है, इसलिए मैं इसे लाने के लिए बटन दबाए बिना अपना डेटा प्रदर्शित कर सकता हूं।

अग्रिम धन्यवाद!

उत्तर

9

आप Html.program उपयोग करते हैं, अपने init समारोह अपने मॉडल और कमान के लिए प्रारंभिक डेटा रिटर्न निष्पादित किया जाना है।

कमांड HTTP अनुरोधों की तरह दुष्प्रभाव हैं।

बदलते init प्रयास करें तो यह एक कमान सही भाग जाता है:

init: (Model, Cmd Msg) 
init = 
    let 
    model = 
     { message = "Welcome", repos = [] } 
    in 
    model ! [ fetchData ] 
+0

धन्यवाद! स्पष्ट स्पष्टीकरण! – mmmaceo

+0

@mmmaceo मदद करने के लिए खुश! – halfzebra

0

यहां Html.App.program का प्रकार हस्ताक्षर है। initCmd स्वीकार करता है, आप बस अपना सीएमडी यहां देते हैं।

program 
    : { init : (model, Cmd msg), update : msg -> model -> (model, Cmd msg), subscriptions : model -> Sub msg, view : model -> Html msg } 
    -> Program Never 
संबंधित मुद्दे