JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html> 
<html lang=en> 
<!-- VERSION 07/10/12 -->
<head>  
    <meta charset=utf-8>
    <title>Ember Menus | Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/0.9.8.1/ember-0.9.8.1.min.js"></script>
</head>

<body>
<div class="container">
    <section id="sidebar">
        <nav>
            <h2>Select Country</h2>
            <script type="text/x-handlebars">
            <ul>
                {{#each FilterMenus.menusController}}
                <li>{{menu_name}}</li>
                {{/each}}
            </ul>
                <p>The &lt;ul&gt; that should contain the menu items is directly above this text. This text is inside the template as well. The template is rendering, but the dynamic content from the controller is not.</p>
            </script>
        </nav>
    </section>
    

</div>


</body>

</html>

CSS

h2 {
    font-weight: bold;
    text-decoration: underline;
}
p {
    font-style: italic;
}

JavaScript

/**************************
* Application
**************************/
var FilterMenus = Em.Application.create();



/**************************
* Models
**************************/
FilterMenus.Menu = Em.Object.extend({
    menu_name: null,
    items: null,
    items_active: [],
    multiselectable: null,
    getOptions: function() {
        return this.options;
    }
});


/**************************
* Views
**************************/

/**************************
* Controllers
**************************/
FilterMenus.menusController = Em.ArrayController.create({
    content: [],
    addMenu: function(menu) {
        this.pushObject(menu);
    },
    removeMenu: function(view){
        this.removeObject(view.context);
    },
    searchAgain: function(view){
        Tweeter.menusController.set('name', view.context);
        Tweeter.menusController.loadTweets();
    },
    reverse: function(){
        return this.toArray().reverse();
    }.property('@each'),
    // this function is purely for testing
    init: function() {
        var countryNames = ['Brazil', 'China','Germany', 'Japan', 'United States'];
        var countryMenu = FilterMenus.Menu.create({
                        menu_name: 'countries',
                        items: countryNames, // This is just a reference: must do deep copy for real apps
                        items_active: [],
                        multiselectable: false
                    });
        this.addMenu(countryMenu);
    }
    
});
var moreCountryNames = ['France', 'Spain','Belgium', 'India', 'United States'];
var countryMenu2 = FilterMenus.Menu.create({
        menu_name: 'countries2',
        items: moreCountryNames, // This is just a reference: must do deep copy for real apps
        items_active: [],
        multiselectable: false
    });
FilterMenus.menusController.addMenu(countryMenu2);

/**************************
* Startup Data
**************************/



/**************************
*...