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


    Populate the Elm View based on the Data in the Model

    Enrico BuonannoEnrico Buonanno

    The second step in data binding is to populate the view based on the data in the model. Data "flows" from the view into the model (via the update function) and then from the model into the view (via the view function). This is how we achieve two-way binding within a one-way data flow.



    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 Notice that what we're doing now is essentially one-way data binding. We are taking the data from our view and putting it into our model, but not the other way around. This can sometimes be a problem.

    00:12 For example, let's say that you wanted emails to always be lowercase. When you receive the input email message, you take the value of the email field, and you convert it to lowercase. As a result of this, if I put caps on and I type joe@Gmail, you will see that now my view and my model have diverged. This can potentially be problematic, of course.

    00:41 The way to fix this would be to go into your view function, and where the email is populated, you could say Now, you still have one-directional data flow, but you have two-way binding. Your view is based on your model, and your model reads from the view.

    01:00 For this to compile, I need to actually pass the model down from the main view function to body. Now, you can see that the problem has been fixed. You can't actually see that I'm typing capitals, but these capitals are immediately being converted to lowercase.