{"id":169,"date":"2021-12-22T08:11:25","date_gmt":"2021-12-22T08:11:25","guid":{"rendered":"https:\/\/kindsonthegenius.com\/elm\/?p=169"},"modified":"2022-01-17T10:24:12","modified_gmt":"2022-01-17T10:24:12","slug":"elm-updating-model-with-button-click","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/","title":{"rendered":"Elm – Updating Model with Button Click"},"content":{"rendered":"

In the previous tutorial(Working with Buttons and TextBoxes<\/a>), we displayed a button and a TextBox on the UI and\u00a0 was able to capture button click.<\/p>\n

    \n
  1. Modifying Records in Elm<\/a><\/li>\n
  2. Modify the Model<\/a><\/li>\n
  3. Capturing TextBox Input on Button Click<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Modifying Records in Elm<\/strong><\/h4>\n

    Before actually discuss model update, let’s see how record can be modified in Elm. This is because you remember that Elm is a pure functional language and therefore all objects are immutable.<\/p>\n

    Approach 1 – Replace existing model<\/strong><\/p>\n

    In our program we have a model with an integer value defined in the init method. So one way to modify the record is to just return a new value in the update function. So in the code below, I’m returning a new value of 20.<\/p>\n

    case<\/span> msg of<\/span>\r\n        Add<\/span> -><\/span>\r\n            -- model<\/span>\r\n            {value =<\/span>  20<\/span>}\r\n<\/pre>\n
    Here the model is replaced completely.<\/p>\n
    Approach 2 – Using Spread Operator Equivalent<\/strong><\/p>\n
    Spread operator is used in JavaScript to replace one or more fields in a records while leaving other fields intact. Assuming with have the student record below:<\/p>\n
     studentRec =<\/span> {firstname:<\/span> \"Kindson\"<\/span>, lastname:<\/span> \"Munonye\"<\/span>, score:<\/span> 100<\/span>}\r\n<\/pre>\n
    We could just change the score using spread operator like so<\/p>\n
     studentRec2 =<\/span> {...<\/span>studentRec, score:<\/span>99<\/span>}\r\n<\/pre>\n
    Now this would create a new record with an updated score of 99.<\/p>\n
    Now the approach above javascript. The equivalent syntax for Elm is given below. Note that we replace : with =
    \n<\/p>\n
    studentRec =<\/span> {firstName =<\/span> \"Kindson\"<\/span>, lastname =<\/span> \"Munonye\"<\/span>, score =<\/span> 100<\/span>}\r\n<\/pre>\n
    For update, we have:<\/p>\n
    studentRec2<\/span> =<\/span> {studentRec |<\/span> age =<\/span> 99<\/span>}\r\n<\/pre>\n
     <\/p>\n
    2. Modify and\u00a0 the Model<\/strong><\/h4>\n
    We would now like to modify our model so that instead of being a single value, it would be record. Therefore, you need to adjust the init function like so:<\/p>\n
    init =<\/span> {<\/span>\r\n          firstname=<\/span>\"Kindson\"<\/span>\r\n        ,<\/span> lastname=<\/span>\"Munonye\"<\/span>\r\n        ,<\/span> score=<\/span>100<\/span>\r\n    }<\/span>\r\n<\/pre>\n
     <\/p>\n
    Then, we can modify the record using the ‘|’ operator. In this case we modify the score while leaving the firstname and lastname unchanged<\/p>\n
    case<\/span> msg of<\/span>\r\n    Add<\/span> -><\/span>\r\n        -- model<\/span>\r\n        {model |<\/span> score =<\/span>  99<\/span>}\r\n<\/pre>\n
    In this case, the model remains, but we just updated the score. Just think of it as a field in the model<\/p>\n
     <\/p>\n
    3. Capturing TextBox Input on Button Click<\/strong><\/h4>\n
    First, we need to create a message to store the TextBox input. Then we need to store what was entered in the input in the model. Follow the steps below:<\/p>\n
    Step 1<\/strong> – Import onInput from Html.Events<\/p>\n
    Step 2<\/strong> – Create a new message called TextChanged which would be a string type.\u00a0 So you now have:<\/p>\n
    type<\/span> Messages<\/span> =<\/span>\r\n    Add<\/span>\r\n    |<\/span> TextChanged<\/span> String<\/span>\r\n<\/pre>\n
    Also note that the TextChanged message has a parameter which is a string. This is the message that was typed in.<\/p>\n
    Step 3<\/strong> – Add the ChangedText message to the\u00a0 view like so<\/p>\n
    view<\/span> model =<\/span>   \r\n    div []<\/span> [\r\n        text(fromInt model.<\/span>value),\r\n        div []<\/span> []<\/span>,\r\n        input [onInput TextChanged<\/span>] []<\/span>, -- added onInput<\/span>\r\n        button [onClick Add<\/span>] [text \"Add\"<\/span>]\r\n    ]\r\n<\/pre>\n
     <\/p>\n
    Step 4<\/strong> – Modify the update function to handle message of type TextChanged.<\/p>\n
    case<\/span> msg of<\/span>\r\n    Add<\/span> -><\/span>\r\n        {model |<\/span> value =<\/span>  20<\/span>}\r\n    TextChanged<\/span> newText ->\r\n<\/span>        -- Use let ... in here <\/span>\r\n        model\r\n<\/pre>\n
     <\/p>\n
    Step 5<\/strong> – We want to show the changed text in the console. To do this, use let … in<\/strong> statement in just before model in the update function<\/p>\n
    TextChanged<\/span> newText -><\/span>\r\n    let<\/span>\r\n        log3 =<\/span> log \"Entered Text\"<\/span> newText\r\n    in<\/span>\r\n    model\r\n<\/pre>\n
     <\/p>\n
    Now you can recompile the program and open the page as well as the console window. You will notice that once you enter text in the TextBox, it is logged in the console.<\/p>\n
    Cool! We now have to talk about some kind of input validation or say input parsing. Let’s do this in the next part.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In the previous tutorial(Working with Buttons and TextBoxes), we displayed a button and a TextBox on the UI and\u00a0 was able to capture button click. … <\/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-169","post","type-post","status-publish","format-standard","hentry","category-elm-programming-tutorial"],"yoast_head":"\nElm - Updating Model with Button Click - 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-updating-model-with-button-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elm - Updating Model with Button Click - Elm Programming\" \/>\n<meta property=\"og:description\" content=\"In the previous tutorial(Working with Buttons and TextBoxes), we displayed a button and a TextBox on the UI and\u00a0 was able to capture button click. …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/\" \/>\n<meta property=\"og:site_name\" content=\"Elm Programming\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-22T08:11:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-17T10:24:12+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-updating-model-with-button-click\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"headline\":\"Elm – Updating Model with Button Click\",\"datePublished\":\"2021-12-22T08:11:25+00:00\",\"dateModified\":\"2022-01-17T10:24:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/\"},\"wordCount\":493,\"commentCount\":0,\"articleSection\":[\"Elm Programming Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/\",\"url\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/\",\"name\":\"Elm - Updating Model with Button Click - Elm Programming\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#website\"},\"datePublished\":\"2021-12-22T08:11:25+00:00\",\"dateModified\":\"2022-01-17T10:24:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/#\\\/schema\\\/person\\\/2a5153913a1c6885206701c60aef361e\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/elm-updating-model-with-button-click\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kindsonthegenius.com\\\/elm\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elm – Updating Model with Button Click\"}]},{\"@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 - Updating Model with Button Click - 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-updating-model-with-button-click\/","og_locale":"en_US","og_type":"article","og_title":"Elm - Updating Model with Button Click - Elm Programming","og_description":"In the previous tutorial(Working with Buttons and TextBoxes), we displayed a button and a TextBox on the UI and\u00a0 was able to capture button click. …","og_url":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/","og_site_name":"Elm Programming","article_published_time":"2021-12-22T08:11:25+00:00","article_modified_time":"2022-01-17T10:24:12+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-updating-model-with-button-click\/#article","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"headline":"Elm – Updating Model with Button Click","datePublished":"2021-12-22T08:11:25+00:00","dateModified":"2022-01-17T10:24:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/"},"wordCount":493,"commentCount":0,"articleSection":["Elm Programming Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/","url":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/","name":"Elm - Updating Model with Button Click - Elm Programming","isPartOf":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#website"},"datePublished":"2021-12-22T08:11:25+00:00","dateModified":"2022-01-17T10:24:12+00:00","author":{"@id":"https:\/\/kindsonthegenius.com\/elm\/#\/schema\/person\/2a5153913a1c6885206701c60aef361e"},"breadcrumb":{"@id":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kindsonthegenius.com\/elm\/elm-updating-model-with-button-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kindsonthegenius.com\/elm\/"},{"@type":"ListItem","position":2,"name":"Elm – Updating Model with Button Click"}]},{"@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\/169","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=169"}],"version-history":[{"count":6,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/posts\/169\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/elm\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}