We'll now see a real-life example of reactive computations and work on our Lending Library at the same time. Adding categories through the console has been a fun exercise, but it's not a long-term solution. Let's make it so that we can do that on the page instead as follows:
Open
LendLib.htmland add a new button just before the{{#each lists}}expression:<div id="categories" class="btn-group"> <div class="category btn btn-primary" id="btnNewCat"> <span class="glyphicon glyphicon-plus"></span> </div> {{#each lists}}
This will add a plus button on the page, as follows:
Now, we want to change the button into a text field when we click on it. So let's build that functionality by using the reactive pattern. We will make it based on the value of a variable in the template.
Add the following
{{#if…else}}conditionals around our new button:<div id="categories" class="btn-group"> {{#if new_cat}} {{else}} <div class...