2012-05-22 4 views
5

Ich möchte ein Steuerelement wie Dialog zur Wiederverwendung erstellen, wenn ich mit Ember brauche. Dialog verwendet $ ('foo'). Dialog-Funktion der Jquery-Bibliothek, um es zu implementieren. E.x:Wie man Kontrollen wie Dialoge in Ember erzeugt?

dialog control in Ember

Können Sie mir geben, Ideen und Beispiele. Vielen Dank.

Antwort

9

Luke Melia erstellt eine repository, die zeigt, wie Ember.js mit jQuery UI verwenden.

Base auf Lukes Beispiel habe ich eine JQ.Dialog Klasse, die ein jQuery UI Dialog darstellt, siehe 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'); 
    } 
}); 

Der Dialog dann wie folgt erstellt:

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

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


Neben jQuery UI können Sieverwenden, eine Widget/UI-Bibliothek für Ember.js. Dieses Projekt hat Unterstützung für eine Diskussionsrunde, siehe 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(); 
+0

Dank Pangratz, aber ich möchte nur einen einfachen Dialog schaffen wie $ (‚foo‘) Dialog von JQuery-Bibliothek.. Kannst du mir irgendwelche Ideen geben? – secretlm

+0

Nun, Sie sollten dann auf Ihre Frage näher eingehen. Aktualisieren Sie es und fügen Sie hinzu, was Sie eigentlich tun möchten ... – pangratz

+0

Vielen Dank, Pangratz. – secretlm