Ember.jsで複数種類のポップアップを表示する

明細の中の編集ポップアップのイメージ
１種類のデータだが、データの状態に応じて、テンプレートを変更したい

ポップアップのテンプレートを複数用意する

popup1.hbs

<div id='editNoNaka'>1</div>

popup2.hbs

<div id='editNoNaka'>2</div>

ポップアップ表示元画面にコンテナを用意する

ControllerにContainerViewを用意する

mainController.js

App.MainController = Ember.ArrayController.extend({
    editContainer: Ember.ContainerView.create(),
	...

テンプレート内でそのContainerViewをいれておく

main.hbs

    <div class="edit">
        {{view editContainer}}
    </div>

呼び出し処理

アクション（引数付き）を用意し、その中でコンテナに対しViewのCreateを行う
Viewに対して、templateNameにアクション引数を渡すことで、テンプレートを切り替える

mainController.js

App.MainController = Ember.ArrayController.extend({
	...

	actions: {
		openEdit: function(hoge) {
			this.get('editContainer').removeAllChildren();
			this.get('editContainer').pushObject(App.EditPopupView.create({templateName: hoge}));
        },

アクションを呼び出すボタンを用意する
その引数としてテンプレート名を渡す

main.hbs

    <button {{action openEdit 'popup1'}}>green</button>
    <button {{action openEdit 'popup2'}}>red</button>

表示処理

Viewの初期表示、didInsertElementで、jQueryでうまく表示する
View自身は

edit_popup_view.js

App. App.EditPopupView = mber.View.extend({
    templateName: '',
    didInsertElement: function() {
        this.$('#editNoNaka').show();
    },
	...
});