एम्बर

Question

में एक्शन हैंडलर पर क्लिक किए गए DOM तत्व का संदर्भ पास करें मेरे पास बटन का एक सेट है जिसका राज्य मैं active कक्षा के साथ टॉगल करना चाहता हूं। अगर मैं एक बटन था, तो मैं एक नियंत्रक संपत्ति को active वर्ग के लिए बाध्य होता है और क्लिक हैंडलर में है कि संपत्ति को चालू:

<button {{action 'toggle'}} class="{{active}}">model.title</button> 

actions: { 
    toggle: function() { 
    this.set('active', true); 
    } 
} 

लेकिन मैं एकाधिक बटन है, तो मुझे यकीन है कि मैं क्या बाध्य कर सकते हैं नहीं कर रहा हूँ। यह उपयोगी होगा अगर मैं एक्शन हैंडलर पर क्लिक किए गए बटन का संदर्भ पास कर सकता हूं, लेकिन मुझे यकीन नहीं है कि यह कैसे करें।

{{#each item in model}} 
    <button {{action 'toggle' referenceToButton}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(buttonReference) { 
    // add `active` class to buttonReference 
    } 
} 

इसे पूरा करने का सबसे अच्छा तरीका क्या है?

Answer 1

मॉडल-आइटम नहीं है जिसे आप पास करना चाहते हैं, बटन नहीं?

फिर आपका टॉगल केवल उस आइटम पर एक विशेषता सेट कर सकता है जिसे आप bind to your button class पर सेट कर सकते हैं।

{{#each item in model}} 
    <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button> 
{{/each}} 

actions: { 
    toggle: function(item) { 
    item.set('isActive', true); 
    } 
} 

Answer 2

हालांकि पोस्टर जवाब वह चाहती थी मिला, मैंने सोचा कि मैं मैं क्या मानना ​​है कि मूल प्रश्न के इरादे था करने के लिए एक उत्तर पोस्ट चाहते हैं:

कैसे एक संदर्भ क्लिक किया डोम पाने के लिए एक कार्रवाई से तत्व? क्योंकि मैं यहां उस प्रश्न का उत्तर ढूंढ रहा था और उसे नहीं मिला।

मैं वास्तविक तत्व प्राप्त करने के लिए एक तरह से नहीं मिल सकता है, लेकिन आप रूट दृश्य तत्व प्राप्त कर सकते हैं this के माध्यम से (जो तत्वों टेम्पलेट में परिभाषित लपेटता):

टेम्पलेट:

<button {{action 'toggle' this}}>model.title</button>

नियंत्रक, देखने के लिए, घटक:

actions: { 
    toggle: function(event) { 
    // Get element (as in the return value of document.getElementById(id)) 
    var viewElements = event.element; 
    var elementsInTemplate = viewElements.children; 
    var button = viewElements.getElementsByTagName('button'); 
    //also can use getElementsByClassName, use jQuery etc. 
    } 
} 

Answer 3

बस एक और जवाब ...

अगर आप onclick (या किसी अन्य डोम घटना) में कार्रवाई डाल आप "घटना" मिल जाएगा पिछले पैरामीटर (ताकि आप event.target का उपयोग कर सकते हो और वस्तु हेरफेर करने के लिए)

में जावास्क्रिप्ट वस्तु टेम्पलेट:

<button onclick={{action 'toggle' model.title}}>model.title</button> 

मार्ग या नियंत्रक:

actions: { 
    toggle (title, event) { 
    // TODO: use title 
    let element = Ember.$(event.target); 
    element.toggleClass("active"); 

    return false; 
    } 
} 

आशा है कि यह मदद करता है

Answer 4

में आप कर सकते हैं यदि active=true तो active वर्ग बटन को लागू किया जाएगा items

{{#each item as |model|}} 
    <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button> 
{{/each}} 

को active संपत्ति troduce।

actions: { 
    toggle: function(buttonReference) { 
    buttonReference.set('active', true); 
    } 
} 

सवाल शीर्षक Pass a reference of the clicked DOM element to the action handler in Ember उत्तर देने के लिए।

1।यदि आप घटक का उपयोग कर रहे हैं, तो आप इस list of event names में से किसी भी घटक को परिभाषित कर सकते हैं और इसे देशी event ऑब्जेक्ट प्राप्त करने के लिए डिज़ाइन किया गया है। जैसे।, {{my-button model=model}}

export default Ember.Component.extend({ 
click(event){ 
    //oncliking on this componen will trigger this function 
    return true; //to bubble this event up 
} 
}) 

2. यदि आप HTML टैग का उपयोग कर रहे की तरह button तो आप एक इनलाइन ईवेंट हैंडलर के लिए एक (बंद) कार्रवाई सौंपने होंगे।

{{#each item as |model|}} 
     <button onclick={{action 'toggle' model}}>{{model.title}}</button> 
{{/each}} 

कार्यों में हैश toggle समारोह हमेशा पिछले तर्क के रूप में स्थानीय ब्राउज़र event वस्तु प्राप्त होगा।

actions:{ 
toggle(model,event){ 

} 
} 

इस <button {{action 'toggle' model}}>{{model.title}}</button> प्रारूप में, कार्रवाई toggleevent वस्तु,

एंबर गाइड में वास्तव में अच्छी तरह समझाया https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions