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

Autoplay

    Iterate over a Collection with Polymer's dom-repeate

    Joe MaddaloneJoe Maddalone

    In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

    polymerPolymer
    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

    00:00 In this lesson, we are going to talk about iterating over a collection inside of our element template using DOM repeat.

    00:08 Here in the ready method of my cart list, I'm assigning a variable of this.food to this array right here, where we have a name and a quantity for pizza, taco, and burger.

    00:20 To do this, we're going to add another template inside of our template. Onto that, we're going to tack on an is attribute of dom-repeat. This is going to set us up to iterate over that collection. To get that collection in there, I'm going to have a key here called items, and into that, I'm going to pass in foods.

    00:43 Here in center template, I'm going to set up a div to hold everything. This first time around, we're going to have a span.

    00:50 Now, to get at our items, I'm going to have item and I'm going to say item.name. Let's see, we'll also tack on our quantity here, so item.quantity. Save that, and over here on the right, we can see that we are, in fact, iterating over those items.

    01:11 We can also get to our index, so here I'm going to say hashtag and I'm going to pass in index, which is a value that's automatically passed through during the iteration. We can see we have our index of zero, one, and two.

    01:27 Lastly, an interesting thing that happens here is we actually get each of these items converted over to a model that's available for any custom events.

    01:35 I'm going to create a button here and I'll just have it enter HTML of a plus symbol, and I'm going to say on click of that. It's going to equal add, which would be a custom event, so I add that right down here. So I add, it'll be a function. It's going to take in an event.

    01:55 We can get to the model that the DOM repeat has created by getting to e.model. We can set a new value by calling it set method. I'm going to set the item.quantity to e.model.item.quantity plus one. We'll increase that value, so let's try that out.

    02:17 Each time I click on this, it's increasing the quantity of that item. We can actually get a look at the fact that it's actually updating, or this.foods, collection by...Let's see, we're going to log out this.foods. I'll just grab our first one, so that'll be the pizza item. We'll log out its quantity right after the add method has been called.

    02:40 When I click on this, you can see that the value is actually being updated as we add new items to our cart.

    Discuss

    Discuss