Luke Melia создал repository, в котором показано, как использовать Ember.js с пользовательским интерфейсом jQuery.
Основание на примере Люка, я создал 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);
Помимо пользовательского интерфейса jQuery вы можете использовать flame.js, библиотеку виджета/пользовательского интерфейса для Ember.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();
Благодаря pangratz, но я просто хочу, чтобы создать простой диалог, как с помощью $ («Foo») диалогового окна библиотеки Jquery.. Не могли бы вы дать мне какие-нибудь идеи? – secretlm
Ну, тогда вы должны уточнить свой вопрос. Обновите его и добавьте то, что вы на самом деле хотите сделать ... – pangratz
Большое спасибо, pangratz. – secretlm