MVC parent/child example

by ud3323

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
    {{#with "App.todosController"}}
      Selected Todo Id: {{selectedToDo.content.id}}<br />
      And it's text: {{selectedToDo.content.text}}
    {{/with}}
    <hr />
    {{#each App.todosController}}
        {{#view App.TodoView contentBinding="this"}}
            {{content.name}}
        {{/view}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="selectedToDo">
    
</script>

JavaScript

App = Ember.Application.create();

// Model
App.Todo = Ember.Object.extend({
    id: null,
    name: null,
    text: null
});

// View
App.TodoView = Ember.View.extend({
    click: function(evt) {
        var controller = this.getPath('_parentView._parentView.content');
        controller.set('selectedToDo', this);
     }
});

// Controller
App.set('todosController', Ember.ArrayProxy.create({
    content: Ember.A(),
    selectedToDo: null
}));

// App logic
App.get('todosController').pushObjects([
    App.Todo.create({id: 1, name: "obj1", text: 'bla1'}),
    App.Todo.create({id: 2, name: "obj2", text: 'bla2'}),
    App.Todo.create({id: 3, name: "obj3", text: 'bla3'}),
    App.Todo.create({id: 4, name: "obj4", text: 'bla4'}),
    App.Todo.create({id: 5, name: "obj5", text: 'bla5'}),
    App.Todo.create({id: 6, name: "obj6", text: 'bla6'})
]);