jquery-ui - Ember でダイアログのようなコントロールを作成するには?

Question

ダイアログのようなコントロールを作成して、Ember で必要なときに再利用したいと考えています。ダイアログは、Jquery ライブラリの $('foo').dialog 関数を使用して実装します。元：

アイデアや例を教えてください。ありがとう。

Answer 1

Luke Melia は、jQuery UI で Ember.js を使用する方法を示すリポジトリを作成しました。

Luke の例にJQ.Dialog基づいて、jQuery UI ダイアログを表すクラスを作成しました。 http://jsfiddle.net/pangratz666/aX7x8/を参照してください。

// Create a new mixin for jQuery UI widgets using the Ember
// mixin syntax.
JQ.Widget = Em.Mixin.create({
    // as defined in
    // https://github.com/lukemelia/jquery-ui-ember/blob/master/js/app.js#L9-95
    ...
});

JQ.Dialog = Ember.View.extend(JQ.Widget, {
    uiType: 'dialog',
    uiOptions: 'autoOpen height width'.w(),

    autoOpen: false,

    open: function() {
        this.get('ui').dialog('open');
    },
    close: function() {
        this.get('ui').dialog('close');
    }
});

ダイアログは次のように作成されます。

var dialog = JQ.Dialog.create({
    height: 100,
    width: 200,
    templateName: 'dialog-content'
});
dialog.append();

Ember.run.later(function(){
    dialog.open();
}, 1000);

</p>

---

jQuery UI の他に、Ember.js のウィジェット/UI ライブラリであるflame.jsを使用できます。このプロジェクトはパネルをサポートしています。 http://jsfiddle.net/qUBQg/を参照してください。

// the following code sample has been taken from http://jsfiddle.net/qUBQg/
App.TestPanel = Flame.Panel.extend({
    layout: { width: 400, height: 200, centerX: 0, centerY: -50 },
    // Controls whether all other controls are obscured (i.e. blocked
    // from any input while the panel is shown)
    isModal: true,
    // This controls the visual effect only, and works only if
    // isModal is set to true
    dimBackground: true,
    // Set to false if you want to e.g. allow closing the panel only
    // by clicking some button on the panel (has no effect if isModal
    // is false)
    allowClosingByClickingOutside: true,
    // Allow moving by dragging on the title bar - default is false
    allowMoving: true,
    // Title is optional - if not defined, no title bar is shown
    title: 'Test Panel',

    // A Panel must have exactly one child view named contentView
    contentView: Flame.LabelView.extend({
        layout: { left: 20, top: 90, right: 20, bottom: 20 },
        textAlign: Flame.ALIGN_CENTER,
        value: 'This is a panel.'
    })
});

// later in the code
App.TestPanel.create().popup();