JSFiddle - React, Tailwind, and code Playground

by Sylvain MINA

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<div id="root"></div>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Test Context Passing</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="widgets">
    <h2>List of widgets:</h2>
    <ul>
    {{#each widget in controller.content}}
        <li><a {{action cloneWidget widget}} href="#">{{widget.name}}</a></li>
    {{/each}}
    </ul>
</script>

JavaScript

var TestApp = Ember.Application.create({
    rootElement: '#root',
    ApplicationView: Ember.View.extend({
        templateName: 'application'
    }),
    init: function(){
        this._super();
        // Bootstrap
    },
    ApplicationController: Ember.Controller.extend({}),
    Router: Ember.Router.extend({
        enableLogging: true,
        connectOutlets: function(router, context) {
                window.console.log('Router received', context);
        },
        root: Ember.Route.extend({
            cloneWidget: function(router, event) {
                window.console.log("transitioning with ", event.context);
                debugger;
                router.transitionTo('create', event.context);  
            },
            connectOutlets: function(router, context) {
                window.console.log('root received', context);
            },
            home: Ember.Route.extend({
                route: '/',
                editItem: Ember.Route.transitionTo('edit.list'),
                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet('widget');
                    window.console.log('root.home received' ,context);
                },
            }),
            create: Ember.Route.extend({
                route: '/new/:widget_id',
                connectOutlets: function(router, context) {
                    window.console.log('root.create received', context);
                }
            })
        })
    })
});

(function(App){
    App.Widget = Ember.Object.extend({
        id: null,
        name: null
    });
    App.WidgetController = Ember.ArrayController.extend({
        content: [],
        init: function(){
            this.set('content', [
                App.Widget.create({id:1,name:'foo'}),
                App.Widget.create({id:2,name:'bar'}),
                App.Widget.create({id:3,name:'baz'}),
            ]);
            this._super();
        }
    });
   ...