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>
<link rel="stylesheet" href="https://github.com/downloads/pjmorse/flame.js/flame.css">
<script src="https://github.com/downloads/pjmorse/flame.js/flame.min.js"></script>
<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.applicationController = Em.ObjectController.create({
    content: 'Controller test value'
});

App.RootView = Flame.RootView.extend({
    // This gets added to the DOM properly
    childViews: 'label1 image1'.w(),
    value: 'RootView value',

    label1: Flame.LabelView.extend({
        // This is also in the DOM

        templateContext: function() {
            return { value: this.get('value') };
        }.property('value'),

        value: 'Test value',
        // This gets rendered, but value is undefined. How do we get value into the DOM?
        handlebars: "Value: {{value}}",
        layout: {
            height: 20,
            width: 400,
            centerX: 0,
            top: 40
        },
        textAlign: Flame.ALIGN_CENTER
    }),

    image1: Flame.ImageView.extend({
        value: 'https://sphotos-b.xx.fbcdn.net/hphotos-snc7/s480x480/599546_885862422458_961738482_n.jpg',
        layout: {
            centerX: -180,
            top: 80
        }
    })
});