JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<link rel="stylesheet" href="http://flamejs.github.com/flame-address-book/css/flame.css">
<script src="http://flamejs.github.com/flame-address-book/js/libs/flame_with_github_image_urls.min.js"></script>
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

CSS

p {
    margin: 10px;
}

JavaScript

// An example of using Flame.MenuView.

App = Ember.Application.create();

App.autoSave = true;

App.fileController = Ember.Object.create({
    recent: ['foo.png', 'bar.png', 'baz.png'],
    
    showFileMenu: function(anchor) {
        Flame.MenuView.create({
            target: this,
            items: [
                { title: 'Save', action: 'save' },
                { title: 'Save As...', action: 'saveAs' },
                { title: 'Open...', isEnabled: false },
                { title: 'Auto save', isChecked: App.get('autoSave'), action: 'toggleAutoSave' },
                {
                    title: 'Recent',
                    subMenu: this.get('recent').map(function(name) {
                        return {
                            title: name,
                            value: name,
                            action: 'openRecent'
                        };
                    })
                }
            ]
        }).popup(anchor);
    },
    
    save: function() {
        $('#logView').append('<p>Saving!</p>');
    },
    
    saveAs: function() {
        $('#logView').append('<p>Saving as!</p>');
    },
  
    toggleAutoSave: function() {
        App.set('autoSave', !App.get('autoSave'));
    },
    
    openRecent: function(item) {
        $('#logView').append('<p>Opening recent: %@</p>'.fmt(item));
    }
});

App.RootView = Flame.RootView.extend({
    childViews: ['buttonView', 'logView'],

    buttonView: Flame.ButtonView.extend({
        layout: { left: 20, top: 20, width: 100 },
        title: 'File...',
        target: App.fileController,
        action: 'showFileMenu'
    }),

    logView: Flame.View.extend({
        elementId: 'logView',
        layout: { left: 250, top: 20, right: 20, bottom: 20 }
    })
});