Create a Custom Element using Polymer

Use Lifecycle Callbacks On Custom Polymer Elements

Style Custom Elements in Polymer

Extend Native HTML Elements with Polymer

Understand Declared Property Basics in Polymer

Data Bind Two Polymer Elements

Observe Property Changes on a Custom Polymer Element

Create Event Listeners in Polymer Elements

Execute Custom Events in Polymer

Iterate over a Collection with Polymer's dom-repeate

Creating Custom Web Elements with Polymer 2

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.

[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.

Course

Creating Custom Web Elements with Polymer 2

Iterate over a Collection with Polymer's dom-repeate

Share this video with your friends