Ember Binding Objects

Trying out the Bindings in Ember

by amindunited

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-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>I'm the start of the application template</h1>
</script>

JavaScript

$(function(){
    window.MyApp = Em.Application.create({
        templateName: "applicaton",
        autoInit: false
    })
    MyApp.ApplicationController = Em.Controller.extend();
    MyApp.ApplicationView = Em.View.extend()
    MyApp.router = Em.Router.create({
        enableLogging: true,
        root: Em.Route.extend({
            index: Em.Route.extend({
                route:'/',
                enter:function(){   
                    MyApp.FirstObj.set('myProps', 'hidleberg')
        
                },
                connectOutlets:function(router, context){
                    
                }
            })        
        })
    })
    
    MyApp.FirstObj = Em.Object.create({
        myProps: Em.A(),
        propsChanged: function(var1, var2){
            console.log("props changed within firstObj", var1, var2);
            console.log("from number 1 ", this.myProps);
        }.observes('myProps')
    })
        
    MyApp.SecondObj = Em.Object.create({
        yourProps: Em.A(),
        firstThings: MyApp.FirstObj,
        propsChanged: function(var1, var2){
            console.log("props changed within secondObj", var1, var2);
            console.log('From number 2 ', this.firstThings.myProps);
        }.observes('MyApp.FirstObj.myProps')
            
    })
    MyApp.initialize(MyApp.router);   
    MyApp.FirstObj.set('myProps', 'egor')
    //MyApp.SecondObj.set('yourProps', 'hidleberg')
})