Using Handlebars.js

Handlebars.js is a great templating framework that gives you the latitude to create single page applications that are modular and quick to implement. The structure can be a bit confusing so I’ve included my source code from an example project I created.

This example also uses sequelize for MySQL queries. I launched the app using Heroku so you can see it in action as well.

Github: https://github.com/sethmh82/seq-eat-da-burger

Heroku Live Demo: https://quiet-river-66814.herokuapp.com

Here’s an example of handlebars being used to dynamically generate content.

    <div class="row" id="burgersDiv">
        <div class="col-lg-4" id="burgerList">
            <table>
                {{#each burgers}}
                    {{#unless this.devoured}}
                        <tr><td>
                            <div style="margin-right: 10px; font-size: 19px; font-weight: 400; background-color: #FFF; padding:5px 8px;">
                            {{this.burger_name}}
                            </div>
                            </td><td>
                            <form action="burgers/update/devour/{{this.id}}?_method=PUT" method="POST">
                                <input type="hidden" name="devoured" value="1" >
                                <button type="submit" class="btn btn-info btn-xs" id="devourBtn">EAT IT</span></button>
                            </form>
                            </td></tr>
                    {{/unless}}
                {{/each}}
            </table>
        </div>