JSFiddle - React, Tailwind, and code Playground

by mediastuttgart

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script>

JavaScript

/**
 * Copyright (c) 2012, MEDIASTUTTGART, http://mediastuttgart.de
 *
 * This file is released under the terms of the MIT license.
 * You can find the complete text in the attached LICENSE
 * file or online at:
 *
 * http://www.opensource.org/licenses/mit-license.php
 */

/*global $, console, window, Ember */
/*jslint browser: true, maxerr: 50, indent: 4 */
(function () {
    'use strict';

    var App = {};
    App.Util = Ember.Application.create();

    // Settings
    App.Util.Display = Ember.Object.create({
        version   : '0.1.0',
        namespace : 'app.util.display'
    });

    // Model
    App.Util.DisplayModel = Ember.Object.extend({
        id      : null,
        age     : 43,
        name    : 'Alex'
    });

    // View
    App.Util.DisplayView = Ember.View.extend({
        tagName      : '',
        templateName : 'display'
    });

    // Controller
    App.Util.DisplayController = Ember.ArrayController.create({
        init : function () {
            var model, view;

            // Compile template
            Ember.TEMPLATES.display = Ember.Handlebars.compile('<div class="event" id="event-{{unbound id}}"><h1>Hello, my name is {{unbound name}} and i am {{unbound age}} years old</h1></div>');

            // Create model
            model = App.Util.DisplayModel.create();

            // Assign model data
            model.set('id', 17);
            model.set('age', 33);
            model.set('name', 'Tom');

            // Create view
            view = App.Util.DisplayView.create({
                id   : model.get('id'),
                age  : model.get('age'),
                name : model.get('name')
            });

            // Append view
            view.append();
        }
    });
}());