एम्बर में संवाद जैसे नियंत्रण कैसे बनाएं?

Question

मैं एम्बर के साथ आवश्यकता होने पर पुन: उपयोग करने के लिए संवाद जैसे नियंत्रण बनाना चाहता हूं। संवाद $ ('foo') का उपयोग करेगा। इसे लागू करने के लिए Jquery लाइब्रेरी का संवाद कार्य। E.x:

तुम मुझे किसी भी विचार और उदाहरण देना हो सका। धन्यवाद।

Answer 1

ल्यूक मेलिया ने repository बनाया जो दिखाता है कि jQuery UI के साथ Ember.js का उपयोग कैसे करें। ल्यूक के उदाहरण पर

बेस, मैं एक JQ.Dialog वर्ग है जो एक jQuery यूआई संवाद का प्रतिनिधित्व करता है बनाया है, 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 UI के अलावा आपका उपयोग कर सकते हैं, 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();