When using attribute bindings, classes are a special case. The reason is because we can pass additional data to determine when to apply certain classes. To see this in action, let's add a strikeout to some items in this shopping list app. Here, we have an li for each item in an item's data property.
To add a strikeout class to this li, we can use the special object syntax. css file, and its value is the conditional we respond to. For us, that's whether or not the item has a truthy purchased property or not. Let's uncomment our initial data set of items below and randomly add purchase properties to each one.
Looking at our browser, we can see that the first two items with the purchase property of true have the strikeout, while the last one does not. Pretty incredible, right? If we take a moment to inspect the allies, we can see that the class is getting toggled in the DOM. Nice.
With the object syntax, we could also continue to add other conditional classes if we'd like. For instance, let's add a high priority property to our items and initialize some as false and some as true. Now in the class binding, we can keep track. of both conditionals.
Perfect. Our item with high priority set to true has the proper class. Well, the others don't. This is great.
But what if you also wanted to include some static classes? It would be kind of silly to have to do something like static class with the condition of true. This would work. However, a less verbose way would be just to add a regular class attribute.
for any static classes in addition to the bound classes. Nice. Each item has the static class. Another special syntax that's available for adding classes is the array syntax.
With the array syntax, each element in the array is just another class. As is, these are static classes, and there is no condition specifying whether to add them or not. If we take a look in the browser, sure enough, Each list item has a duplicate row at the bottom that always includes both strikeout and priority classes. If we wanted to make the classes conditional in the array syntax, then we'd have to do that manually with an expression that uses a ternary operator, something like this.
purchased is true. More. even provide a different class when purchased is false. Sweet.
Lastly, we could even combine the array syntax and the object syntax together if we wanted to. To show you what that looks like, I'll remove the Turner expressions and change them out for the object syntax nested right there inside the array syntax with each item in the array being its own object. Then we could go on to add our static classes right there into the array. This will result in the exact same classes being added as in the li above.
It's just a little different approach. Let's see it in the browser. Awesome. The first three items are strikeout, strikeout, and priority.
And the last three items are the exact same thing. Strikeout, strikeout, and priority. And they all have the static class. Finally, while we're adding in these arrays and objects directly in the template.
Should your use case call for it, you could also define them in your data or in something called computed props that we'll talk about more in the next lesson. All right, with our dynamic strikeout set up, let's add a method to toggle it on each item. First, I'll remove this extra li as it's not needed. Then we'll add a new method to our methods object.
called TogglePurchased. In this function, we can pass through the item itself, and then update the purchased property directly. We'll set it to the opposite of what it was before, effectively toggling it. With the method now taken care of, we can go ahead and add it to each LI with the Vyond directive.
And just like that, clicking on our shopping list items toggles their strikeout classes. Sweet! Now we're keeping track of our purchased items. Also, now that we're styling the high priority items, let's make the high priority checkbox actually affect the newly created items.
newItem high priority. And in both places where we're resetting new item, we'll also reset the high priority. Let's give it a shot in the browser. I'll add a new item and set it as high priority.
Perfect. It works. There's nothing to it with view. When using attribute bindings, classes are a special case.
The reason is because we can pass additional data to determine when to apply certain classes. To see this in action, let's add a strikeout to some items in this shopping list app. Here, we have an li for each item in an item's data property. To add a strikeout class to this li, we can use the special object syntax.
css file, and its value is the conditional we respond to. For us, that's whether or not the item has a truthy purchased property or not. Let's uncomment our initial data set of items below and randomly add purchase properties to each one. Looking at our browser, we can see that the first two items with the purchase property of true have the strikeout, while the last one does not.
Pretty incredible, right? If we take a moment to inspect the allies, we can see that the class is getting toggled in the DOM. Nice. With the object syntax, we could also continue to add other conditional classes if we'd like.
For instance, let's add a high priority property to our items and initialize some as false and some as true. Now in the class binding, we can keep track. of both conditionals. Perfect.
Our item with high priority set to true has the proper class. Well, the others don't. This is great. But what if you also wanted to include some static classes?
It would be kind of silly to have to do something like static class with the condition of true. This would work. However, a less verbose way would be just to add a regular class attribute. for any static classes in addition to the bound classes.
Nice. Each item has the static class. Another special syntax that's available for adding classes is the array syntax. With the array syntax, each element in the array is just another class.
As is, these are static classes, and there is no condition specifying whether to add them or not. If we take a look in the browser, sure enough, Each list item has a duplicate row at the bottom that always includes both strikeout and priority classes. If we wanted to make the classes conditional in the array syntax, then we'd have to do that manually with an expression that uses a ternary operator, something like this. purchased is true.
More. even provide a different class when purchased is false. Sweet. Lastly, we could even combine the array syntax and the object syntax together if we wanted to.
To show you what that looks like, I'll remove the Turner expressions and change them out for the object syntax nested right there inside the array syntax with each item in the array being its own object. Then we could go on to add our static classes right there into the array. This will result in the exact same classes being added as in the li above. It's just a little different approach.
Let's see it in the browser. Awesome. The first three items are strikeout, strikeout, and priority. And the last three items are the exact same thing.
Strikeout, strikeout, and priority. And they all have the static class. Finally, while we're adding in these arrays and objects directly in the template. Should your use case call for it, you could also define them in your data or in something called computed props that we'll talk about more in the next lesson.
All right, with our dynamic strikeout set up, let's add a method to toggle it on each item. First, I'll remove this extra li as it's not needed. Then we'll add a new method to our methods object. called TogglePurchased.
In this function, we can pass through the item itself, and then update the purchased property directly. We'll set it to the opposite of what it was before, effectively toggling it. With the method now taken care of, we can go ahead and add it to each LI with the Vyond directive. And just like that, clicking on our shopping list items toggles their strikeout classes.
Sweet! Now we're keeping track of our purchased items. Also, now that we're styling the high priority items, let's make the high priority checkbox actually affect the newly created items. newItem high priority.
And in both places where we're resetting new item, we'll also reset the high priority. Let's give it a shot in the browser. I'll add a new item and set it as high priority. Perfect.
It works. There's nothing to it with view.