Ember dynamic child views

by MikeAski

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 editorBinding="App.SelectedEditorController.editor"}}
</script>

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

<script type="text/x-handlebars" data-template-name="editor_two_settings">
  <h1>{{name}}</h1>
  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({
  editor: null
});

App.EditorView = Ember.ContainerView.extend({
    updateForm: function() {
        var editor = this.get('editor');
        if (Ember.none(editor)) return;
        var view = editor.get('settingsView');
        this.get('childViews').popObject();
        this.get('childViews').pushObject(view);
    }.observes('editor')
});

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

editors.forEach(function(editor) {
  editor.set('settingsView', Ember.View.create({
    templateName: editor.get('name') + "_settings",
    name: editor.get('name')
  }));
});

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