Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In


    Update the Elm Model in Response to Events from the View

    Enrico BuonannoEnrico Buonanno

    Elm uses one-way data flow: when an event occurs, you get a chance to update the underlying model as a result. This is the first step in data binding.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 Now, I've done all the setup to have an interactive program, but the program doesn't really do anything as yet. I have a model that represent the data in my program, fields for email and message that the user may type, and I have the visual components. Now, I just need to bind the two.

    00:20 I'm going to do this through events. Firstly, I'm going to import the Html.Events package. Particularly, I'm going to use the onInput function, which I'm going to use to handle the input event on these text fields.

    00:41 I'm going to go to my view and find where I have these fields. I'm going to add some additional attributes. We'll have onInput, and now, I need to give it a function that will capture the value of the input. This should additionally be of type message.

    01:03 I have my message here, input email and input message. These will actually take a string. Here, I can say onInput input email. Similarly, on the text area, I can say onInput input message. Essentially, what this does is when the input event is raised, it will take the value of the input, and will pass it to input message. Input message will store this string, and it's essentially creating a message.

    01:51 This is also the meaning of this message parameter here. What this signature is saying is that I'm returning some HTML that can raise some messages of type message. Now, I can use this in my update function.

    02:07 I'm going to switch on the type of message that I've received. If the message was of type input email, with an email, then, I'm going to return a tuple -- let me reuse this -- where the model will be just like the model before, but the email field on the model will be this new value email. To distinguish these names, because they're all the same, let me call this E, and no commands to be executed.

    02:46 Similarly, if the message is input message -- let me call this M -- then, the message on the model should be M. Finally, we have the submit message. In this case, I'm just going to return the model without any changes, and for the moment, no commands either.

    03:16 What should happen now is that when the user types into the email field, for example, then, this input email will be called, and this will construct a message of input email, with the payload of the current value of the input. Then Elm will call the update function, and this will essentially put this new value for the email into my model.

    03:41 The thing is, at the moment, there's no good way to check that this is really the case. For the sake of debugging, let me display the model on the form. I'm going to add a new div, and I'm going to print the model.

    03:59 Let me open this now in the browser so that you can see this a bit more clearly. You will see below the submit this dump of the current state of the model. If I type some text here, you will see that the model is updated as a result of changes to the inputs.