Using Flame.LabelView with recent Ember

by pjmorse

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/pjmorse/flame.js/flame.min.js"></script>
<link rel="stylesheet" href="https://github.com/downloads/pjmorse/flame.js/flame.css">
<script type="text/x-handlebars">
    {{view App.RootView}}
</script>

CSS

.flame-label-view {
    border: 1px dotted #f30;
}

JavaScript

// Testing Flame LabelViews using ember-latest
// Flame.js built from my own fork, which differs very little from master
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.applicationController = Em.ObjectController.create({
    content: 'Controller start value'
});

App.RootView = Flame.RootView.extend({
    childViews: 'label1 select1'.w(),

    label1: Flame.LabelView.extend({
        valueBinding: 'App.applicationController.content',
        handlebars: "Value: {{value}}",
        layout: {
            height: 20,
            width: 400,
            centerX: 0,
            centerY: 0
        },
        textAlign: Flame.ALIGN_CENTER
    }),
    select1: Flame.View.extend({
        childViews: ['label2', 'button1'],

        label2: 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.applicationController.content'
        })
        
    })
});