It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

Riot JS - Repeating Elements with Each Attribute

[00:00] Repeating elements in Riot is really similar to Angular. I'm going to add some data first. I want to convert my ingredients to data so that I have something to loop over. Now I won't need these. I'm going to use the special each attribute to loop through ingredients. I'll render out one ingredient element per ingredient in the data.

[00:27] With each, there are a couple ways you can do this. You can specify a local variable name and say, "This in ingredients." For every ingredient in ingredients, I want to create one of these objects. Now I have too much butter. That's because all of them are getting the name "butter" and the amount three tablespoons.

[00:51] With the each attribute, that's run in the context of the parent, but all the other attributes on ingredient within the repeat are actually run in the context of the repeated items instance.

[01:02] Right here, I can access several different things. I can access ING. I could pass in the name from that. We can see that updates. I can also change this to be ING amount. That'll update the amounts.

[01:20] Something interesting is in here, that you can also access via this. Actually, I take that back. You can't access via this unless you take this off. If you don't create the local variable, the instance variable, if you do just this, it'll break like that, but now I have access to this right here. You may prefer to do it this way.

[01:45] Now you could also take it a step further and actually get rid of these. When you loop over items without creating an instance variable, when you just say "each" and then the array or the collection, the data object is actually passed in as the this context into the tag.

[02:06] Now I can actually get rid of these. You see that works as well. We have butter, marshmallow, and Rice Krispies. I think this is really elegant. Now I'll show you a couple other things about the each attribute.

[02:21] When you add an event on an each object or an each instance, for example, if you have an on-click event right here, you have to remember that the context that you're currently in is the instance. That means if I try to say that on click I want to call the on-click function...Let's say I have one set up down here. I can console log, out here, "Clicked."

[02:51] If I try to do this, it's not going to work. That's because I actually have to access the parent, which is the app tag. This should work now. Additionally, if you pass in the event object, you can have access to the item like this. That's going to be a reference to the object in the array. Lastly, within each attribute, if I have an object, then I can actually loop over this object.

[03:26] Now if we go back to the way we were doing it before, where we had options, where we were passing in name and amount via the options, then I could change this to be key value in ingredient object. Now I'll pass into name the key. I'll pass into amount the value. That pretty much summarizes all of the features or most of the features with the each attribute.

Riot JS - Repeating Elements with Each Attribute

Share this video with your friends