Ember dynamic child views

by zaius

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars">
  {{#each App.EditorsController}}
    {{#view App.ButtonView contentBinding="this"}}
      <a href="#" {{action "select"}}>{{content.name}}</a>
    {{/view}}
  {{/each}}
  {{#view App.EditorView contentBinding="App.SelectedEditorController.content"}}
    {{#if content}}
      <h1>{{content.name}}</h2>

      {{view content.settingsView}}
    {{/if}}
  {{/view}}
</script>

<script type="text/x-handlebars" data-template-name="editor_one_settings">
  Form for editing page one goes here
</script>

<script type="text/x-handlebars" data-template-name="editor_two_settings">
  Form for editing page two goes here
</script>

JavaScript

window.App = Ember.Application.create();

App.Editor = Ember.Object.extend({
  name: null,
  settingsView: null
});

App.SelectedEditorController = Ember.Object.create({
  content: null
});

App.EditorView = Ember.View.extend({});

var editors = [
  App.Editor.create({ name: 'editor_one' }),
  App.Editor.create({ name: 'editor_two' })
];

$.each(editors, function() {
  this.set('settingsView', Ember.View.extend({
    templateName: this.get('name') + "_settings"
  }));
});

App.EditorsController = Ember.ArrayController.create({
  content: editors
});
App.ButtonView = Ember.View.extend({
  select: function() {
    App.SelectedEditorController.set('content', this.content);
  }
});