{"id":156,"date":"2021-12-21T13:43:40","date_gmt":"2021-12-21T13:43:40","guid":{"rendered":"https:\/\/kindsonthegenius.com\/elm\/?p=156"},"modified":"2022-01-17T05:59:55","modified_gmt":"2022-01-17T05:59:55","slug":"elm-understanding-model-view-and-update","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/","title":{"rendered":"Elm – Understanding Model, View and Update"},"content":{"rendered":"

In the previous part<\/a> we wrote a program that used a model to update the view. In this part, we would understand how model, view and update works.<\/p>\n

module<\/span> Main<\/span> exposing (..<\/span>)           -- Line 1     <\/span>\r\n\r\nimport<\/span> Browser<\/span>                      -- Line 2<\/span>\r\nimport<\/span> Html<\/span> exposing (div, text)    -- Line 3<\/span>\r\n\r\n-- Function to add two numbers      -- Line 4<\/span>\r\nadd<\/span> a b =<\/span> a +<\/span> b                     -- Line 5<\/span>\r\ninit<\/span> =<\/span>                              -- Line 6<\/span>\r\n    { value =<\/span> 0<\/span>}                    -- Line 7<\/span>\r\n\r\nview<\/span> model =<\/span>                        -- Line 8<\/span>\r\n    div []<\/span> [text \"How Elm Works\"<\/span>] -- Line 9<\/span>\r\n\r\nupdate<\/span> model =<\/span>                      -- Line 10<\/span>\r\n    model                           -- Line 11<\/span>\r\n\r\nmain<\/span> =<\/span>                              -- Line 12<\/span>\r\n    Browser<\/span>.<\/span>sandbox                 -- Line 13<\/span>\r\n        {                           -- Line 14<\/span>\r\n            init =<\/span> init,            -- Line 15<\/span>\r\n            view =<\/span> view,            -- Line 16<\/span>\r\n            update =<\/span> update         -- Line 17<\/span>\r\n        }                           -- Line 18<\/span>\r\n<\/pre>\n
To help us understand the Elm program we wrote, I have added line numbers. So we begin with Line 1<\/p>\n
 <\/p>\n
Line 1<\/strong><\/p>\n
module<\/span> Main<\/span> exposing (..<\/span>)     --   Line 1<\/span>\r\n<\/pre>\n
This is a module declaration containing the name of the module and exposing (..) indicates that all the functions in this module can be used by other modules<\/p>\n
 <\/p>\n
Line 2 and 3<\/strong><\/p>\n
<\/p>\n
import<\/span> Browser<\/span>                      -- Line 2<\/span>\r\nimport<\/span> Html<\/span> exposing (div, text)    -- Line 3<\/span>\r\n<\/pre>\n
This two lines import modules which contains UI component necessary for rendering\u00a0 some content on a webpage.<\/p>\n
 <\/p>\n
Line 4<\/strong><\/p>\n
-- Function to add two numbers      -- Line 4<\/span>\r\n<\/pre>\n
This is a comment. Comments in Elm begin with —<\/p>\n
 <\/p>\n
Line 5<\/strong><\/p>\n
add<\/span> a b =<\/span> a +<\/span> b                     -- Line 5<\/span>\r\n<\/pre>\n
This is a function definition. The name of the function is add<\/strong>. It takes two parameters, adds and returns the sum.<\/p>\n
 <\/p>\n
Lines 6 and 7<\/strong><\/p>\n
init<\/span> =<\/span>                              -- Line 6<\/span>\r\n    { value =<\/span> 0<\/span>}                    -- Line 7<\/span>\r\n<\/pre>\n
The init function sets the initial value of the model. In this example, the value is set to 0.<\/p>\n
 <\/p>\n
Lines 8 and 9<\/strong><\/p>\n
view<\/span> model =<\/span>                      -- Line 8<\/span>\r\n    div []<\/span> [text \"How Elm Works\"<\/span>] -- Line 9<\/span>\r\n<\/pre>\n
The view function takes the model as its first parameter. It returns a div tag which takes two parameters. The first is the list of attributes while the second is list of contents that go inside the div.<\/p>\n
 <\/p>\n
Lines 10 and 11<\/strong><\/p>\n
update<\/span> model =<\/span>                      -- Line 10<\/span>\r\n    model                           -- Line 11<\/span>\r\n<\/pre>\n
The update function also takes the model as its first parameter. It should return the updated value of the model. For this particular case, we just return the model as we are not changing anything as at now.<\/p>\n
 <\/p>\n
Lines 12 to 18<\/strong><\/p>\n
main<\/span> =<\/span>                              -- Line 12<\/span>\r\n    Browser<\/span>.<\/span>sandbox                 -- Line 13<\/span>\r\n        {                           -- Line 14<\/span>\r\n            init =<\/span> init,            -- Line 15<\/span>\r\n            view =<\/span> view,            -- Line 16<\/span>\r\n            update =<\/span> update         -- Line 17<\/span>\r\n        }                           -- Line 18<\/span>\r\n<\/pre>\n
This is the main method. It calls the Browser.sandbox(). This function takes a record having three properties:<\/p>\n
init<\/em> – the initial model<\/p>\n
view<\/em> – the function that actually renders the model on the\u00a0 screen<\/p>\n
update<\/em> – this is the function that update the model when something changes<\/p>\n
 <\/p>\n
Rendering the Model<\/strong><\/h4>\n
Now that you understand how an Elm program works, let’s go a bit further.<\/p>\n
If you compile this code you will notice that the text that displays on the screen is a hardcoded text passed in to the view. But you see that the view takes the model as parameter. So we would like to display the model rather than a hardcoded value. To do that we would:<\/p>\n
replace the text “How Elm Works” with model.value<\/p>\n
But model.value is a number whereas the text attrribute of the div tag expects a string. To fix this, instead of model.value we would use a fromInt() function like so:<\/p>\n
view<\/span> model =<\/span>                            -- Line 8<\/span>\r\n    div []<\/span> [text (fromInt model.<\/span>value)] -- Line 9<\/span>\r\n<\/pre>\n
Then we also need to import the fromInt function from String module like so<\/p>\n
import<\/span> String<\/span> exposing (fromInt)\r\n<\/pre>\n
 <\/p>\n
At this point, everything works fine. You can just also change the value form 0 to 33 or something else, recompile and see that the UI is updated with the new value.<\/p>\n
Cool! In the next part, we now see how we can work with buttons and textboxes.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous part we wrote a program that used a model to update the view. In this part, we would understand how model, view … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-156","post","type-post","status-publish","format-standard","hentry","category-elm-programming-tutorial"],"yoast_head":"\nElm - Understanding Model, View and Update - Elm Programming<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elm - Understanding Model, View and Update - Elm Programming\" \/>\n<meta property=\"og:description\" content=\"In the previous part we wrote a program that used a model to update the view. In this part, we would understand how model, view …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/\" \/>\n<meta property=\"og:site_name\" content=\"Elm Programming\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-21T13:43:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-17T05:59:55+00:00\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"headline\":\"Elm – Understanding Model, View and Update\",\"datePublished\":\"2021-12-21T13:43:40+00:00\",\"dateModified\":\"2022-01-17T05:59:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/\"},\"wordCount\":467,\"commentCount\":0,\"articleSection\":[\"Elm Programming Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/\",\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/\",\"name\":\"Elm - Understanding Model, View and Update - Elm Programming\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#website\"},\"datePublished\":\"2021-12-21T13:43:40+00:00\",\"dateModified\":\"2022-01-17T05:59:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-understanding-model-view-and-update\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elm – Understanding Model, View and Update\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#website\",\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/\",\"name\":\"Elm Programming\",\"description\":\"Elm Programming Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"sameAs\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\"],\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/author\\\/kindsonthegenius-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elm - Understanding Model, View and Update - Elm Programming","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/","og_locale":"en_US","og_type":"article","og_title":"Elm - Understanding Model, View and Update - Elm Programming","og_description":"In the previous part we wrote a program that used a model to update the view. In this part, we would understand how model, view …","og_url":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/","og_site_name":"Elm Programming","article_published_time":"2021-12-21T13:43:40+00:00","article_modified_time":"2022-01-17T05:59:55+00:00","author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/#article","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"headline":"Elm – Understanding Model, View and Update","datePublished":"2021-12-21T13:43:40+00:00","dateModified":"2022-01-17T05:59:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/"},"wordCount":467,"commentCount":0,"articleSection":["Elm Programming Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/","url":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/","name":"Elm - Understanding Model, View and Update - Elm Programming","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#website"},"datePublished":"2021-12-21T13:43:40+00:00","dateModified":"2022-01-17T05:59:55+00:00","author":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"breadcrumb":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-understanding-model-view-and-update\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kindsonthegenius.com\/elm\/"},{"@type":"ListItem","position":2,"name":"Elm – Understanding Model, View and Update"}]},{"@type":"WebSite","@id":"https:\/\/kindsonthegenius.com\/elm\/#website","url":"https:\/\/kindsonthegenius.com\/elm\/","name":"Elm Programming","description":"Elm Programming Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kindsonthegenius.com\/elm\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"sameAs":["https:\/\/kindsonthegenius.com\/elm"],"url":"https:\/\/kindsonthegenius.com\/elm\/author\/kindsonthegenius-3\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":5,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/156\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}