Filtering Outputs

4. Lesson of RiotJS

Conditionals are very easy to implement. With the power of inline conditions, you can quickly filter your data.

Martin Muzatko Written by Martin Muzatko
on

intro

This is a tiny lesson before we move on with more complex things like eventhandling.

For our list of users, we want to show which are possible candidates to run as President for the United States. Which means that we will look for everyone of the age 35 or older.

<script type="riot/tag"> <riot-filter> <h2>List of possible candidates</h2> <div if=\{user.age >= 35\} each=\{user, key in users\}> \{key\} - \{user.name\} is \{user.age\} years old </div> this.users = [ \{name : 'John', age : 20\}, \{name : 'Jake', age : 37\}, \{name : 'Jayson', age : 18\}, \{name : 'Jenny', age : 35\}, \{name : 'Jessica', age : 23\} ] </riot-filter> </script> <riot-filter></riot-filter>

What a bummer, only two of them are able to be get elected. With if={condition} you can compare any property of the looped object to another value. Like in any other javascript expression that is placed between curly brackets. if={} always requires to be within the list of HTML attributes. This way it is always bound to HTML elements and does not render the HTML at all. There are similar conditionals like show={} which adds style="display: none;" to the tag, when the condition is not met. hide={} does the opposite of show.

RIOT
<h2>List of possible candidates</h2>
<div if={user.age >= 35} each={user, key in users}>
    {key} - {user.name} is {user.age} years old
</div>
this.users = [
    {name : 'John',     age : 20},
    {name : 'Jake',     age : 37},
    {name : 'Jayson',   age : 18},
    {name : 'Jenny',    age : 35},
    {name : 'Jessica',  age : 23}
]

Note: There is nothing like else, but you can just negate (if={!}) the expression and put it into another block to achieve that.

Filtering with CLASS

We can also filter by highlighting the people with another way of conditionals: inline.

RIOT
<div each={user, key in users}>
    {key} - {user.name} is {user.age} years old {'and ready for election': user.age >= 35}
</div>

Additional to displaying data, riot has also a shortcut for conditional strings. We can use that feature for conditional classes. Like a highlight class.

<script type="riot/tag"> <riot-filter2> <h2>List of possible candidates</h2> <div class=\{highlight: user.age >= 35\} each=\{user, key in users\}> \{key\} - \{user.name\} is \{user.age\} years old </div> <style> .highlight \{ background: #338DD7; color: #F1F1F1; \} </style> this.users = [ \{name : 'John', age : 20\}, \{name : 'Jake', age : 37\}, \{name : 'Jayson', age : 18\}, \{name : 'Jenny', age : 35\}, \{name : 'Jessica', age : 23\} ] </riot-filter2> </script> <riot-filter2></riot-filter2>

Ternary Operator - also known as Two-Way-Switch

Lastly, there is also a quick way to toggle strings/classes. Which means: if condition is met, show first string, else: second string.

can {user.name} be a president? {user.age >= 35 ? 'yes' : 'no'}
<div class={user.selected ? 'active' : 'inactive'}>{user.name}</div>

Quick overview of conditionals

Riot Cheatsheet - http://martinmuzatko.github.io/riot-cheatsheet/#conditions

Official Guide on Conditions - http://riotjs.com/guide/#conditionals

Quick overview of conditionals

Previous Lesson

Iterating through your data

Looping was never easier. You don't even have to think about a way how to get data displayed as HTML via Javascript or call any rendering methods. Nope - all part of Riots magic.

Next Lesson

Do something! - Working with Events

Mastering Events is comparable to learning how a Spacerocket works inside out. Riot decided to rebel against this profession of event-wizardry and made it easy for everyone.

See all Lessons