This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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.

    elmElm
    Code

    Code

    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
    Transcript

    Transcript

    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 valuemodel.email. 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.

    Discuss

    Discuss