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>

JavaScript

// An example of using Flame.SelectButtonView with a tree of items.
// (Flame.MenuView accepts the same kind of items.)

App = Ember.Application.create();

App.countries = [
    { title: 'Europe', subMenu: [
        { value: 'fi', title: 'Finland' },
        { value: 'sv', title: 'Sweden' },
        { value: 'be', title: 'Belgium' },
        { value: 'gb', title: 'Great Britain' }
    ] },
    { title: 'Asia', subMenu: [
        { value: 'ch', title: 'China' },
        { value: 'in', title: 'India' },
        { value: 'th', title: 'Thailand' }
    ] }
];

App.selectedCountry = null;

App.RootView = Flame.RootView.extend({
    childViews: ['label1', 'button1'],

    label1: Flame.LabelView.extend({
        layout: { left: 20, top: 20, width: 100 },
        value: 'Choose country:'
    }),
    
    button1: Flame.SelectButtonView.extend({
        layout: { left: 140, top: 20, width: 150 },
        items: App.countries,
        valueBinding: 'App.selectedCountry'
    })
});