re: Modelling a save button in Elm VIEW POST


Great article. I am new to Elm, could you please provide the "View" code for this sample ? or maybe full working github code ?


Hi Suresh,

Thank you! Unfortunately I never wrote any view code for this sample, though I can see how that would might make a handy reference. Is there any aspect in particular you are curious about?

I did write a previous blog post about a subject more related to views which might be of interest: dev.to/jwoudenberg/a-type-for-view...




Thanks for the reply.

I am trying to use this code to build the view function and I am stuck at hooking the "MakeChange newBlog ->" Msg to onInput event, it complaints that onInput only accepts String, so wondering how to handle this? I am thinking of changing MakeChange Blog to MakeChange String, not sure if that is the way.

Ah, I have one idea what might be going on. onInput takes as an argument a function String -> msg right? To turn a string into our Msg type we need to wrap it in two layers: First into the Blog type we defined, then in the MakeChange constructor. So if you pass onInput a function like this, I think it should work out:

onInput (\newContents -> MakeChange (Blog newContents))

-- Or, alternatively, if you're fan of this sort of thing
onInput (MakeChange << Blog)

Also happy to take a look at your code if you have it in ellie or something!

I am thinking of changing MakeChange Blog to MakeChange String, not sure if that is the way.

That would also work! You'd probably want to change the Blog type from being a 'custom type' to a 'type alias', like this:

type alias Blog = String

Now anywhere where you need a Blog you can simply pass a String and vice versa!

Awesome, I got it working with this code. Here is the ellie link ellie-app.com/3jDVmS9GVq3a1 thanks for the help. Also, just wondering about "Blog.encode", is encode is available by default in any type?

Hey, this is great! Thanks for sharing!

With regards to Blog.encode, the Blog in there refers to the module called Blog, not the type Blog (confusing, I know). So Blog.encode refers to the encode function in the Blog module. In Elm types never have 'methods', like you would see in an object oriented language, so when you see CapitalizedThing.anything you can be sure CapitalizedThing is referring to a module.

When a type has a bunch of helper functions doing stuff with it, these are often put together in a module named after the type. In my post I hypothesize such a module Blog exists, through the line import Blog exposing (Blog) in the example, but don't show the implementation of that module. The encode function defined in there might look something like this:

import Json.Encode exposing (Value)

encode : Blog -> Value
encode (Blog blog) = Json.Encode.string blog

Json.Encode comes form the elm/json package.

Wonderful. Understood your explanation and totally make sense now :).
Thank you very much for taking the time to help me out. I am getting my head around it quite nicely on Elm language. Elm rocks!!!

Also, I have a different version of CHANGE function since I am not sure what I would gain by passing a function and a blog, so tried the below function and it works, but not sure if I am missing any Elm standards here, but just a different approach.

buildUpdatedBlog : doc -> MaybeSaved doc -> MaybeSaved doc
buildUpdatedBlog newBlog (MaybeSaved lastSaved current) =
MaybeSaved lastSaved newBlog

here is the latest ellie link, ellie-app.com/3jHs2wFCmhXa1, any suggestions would be great.

Hope to see you at Elm Conf 2018.

Looking great!

Also, I have a different version of CHANGE function since I am not sure what I would gain by passing a function and a blog.

Yeah, that's a good simplification!

The version of change in the post only comes in handy when you want to make a change that somehow depends on the previous value. Because the onInput handler for our text area always gives us the entire text of the blog we're not really interested in the old value of the blog. But if your blog app will for example have separate inputs for the blog title and the blog body the version of change in my post will come in handy.

Hope to see you at Elm Conf 2018.

I have to miss it unfortunately, I won't be in the US. Hope you enjoy it!

Code of Conduct Report abuse