JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars">
    Dogs: {{App.dog.sound}}
    <br />
    Cats: {{App.cat.sound}}
    <br />
    Mouse: {{App.mouse.sound}}
    <br />
    Cheese: {{App.cheese.sound}}
</script>

JavaScript

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

Em.run.next(function(){
    App.set('dog', Em.Object.create({ sound: 'bark' }));
    App.set('cat', Em.Object.create({ sound: 'meow' }));
    
    // using scope.
    var mouse = Em.Object.create({ sound: 'squeak' });
    App.set('mouse', mouse);

    //
    App.set('cheese', Em.Object.create({ sound: 'hmmmm' }));

    
    Em.run.later(function(){
        App.cat.bind('sound', Em.Binding.from('App.dog.sound'));
    }, 1000);
    

    Em.run.later(function(){
        mouse.bind('sound', Em.Binding.from('App.dog.sound'));    
    }, 2000);


    Em.run.later(function(){
        var doSomething = Em.Object.create({
            list: Em.A([]),
            dogBinding: 'App.dog',
            
            _change: function(){
                debugger;
                var cheese = this.get('list').objectAt(0);
                cheese.bind('sound', 'dog.sound');
            }.observes('list.length')
        });
            
        doSomething.get('list').pushObject(Em.get(App, 'cheese'));
    }, 3000);
});