Example with itemcontroller

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <h3>Content</h3>
    <p>Alpha {{content.alpha}}, beta {{content.beta}}, omega {{content.omega}}</p>
    <p>Foo is {{foo}}.</p>
    <button {{action setFoo}}>Initialize foo</button>
    <button {{action resetContent}}>Reset content</button>
    <button {{action incAlpha}}>Increment alpha</button>
</script>

JavaScript

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

App.IndexController = Ember.ObjectController.extend({
    fancyBoxChecked: false,

    init: function() {
        this.resetContent();
    },
    
    resetContent: function() {
        console.log('resetting content');
        this.set('content', {alpha: 123,
                             beta: "abc",
                             omega: false});
    },
    
    setFoo: function() {
        this.set('foo', 42);
    },
    
    incAlpha: function() {
        var a = this.get('content.alpha');
        this.set('content.alpha', a+1);
    },
});