एम्बर चेकबॉक्स इनपुट सहायक

Question

मैं एम्बर के चेकबॉक्स इनपुट हेल्पर्स में से एक का उपयोग करने की कोशिश कर रहा हूं जो इसे एक क्रिया के साथ एक div के अंदर रखा गया है। मेरी समस्या यह है कि अब चेकबॉक्स पर क्लिक करने से सही तरीके से काम नहीं होता है और इसके बजाय कंटेनर के एक्शन हेल्पर को बुलाया जाता है।

App.MyCheckboxComponent = Ember.Component.extend({ 

    isSelected: false, 

    actions: { 
     containerClicked: function(e) { 
      alert('container clicked'); 
     } 
    } 

}); 

मैंने इसे क्रिया में दिखाने के लिए fiddle बनाया है। क्या कोई जानता है कि मैं इसे कैसे रोक सकता हूं?

मुझे चेकबॉक्स से पर क्लिक करना इसके बाध्य मूल्य अद्यतन करें।

जबकि चेकबॉक्स कंटेनर बाहर क्लिक कंटेनर के साथ जुड़े कार्यवाही प्रारंभ करना चाहिए।

सामान्य उद्देश्य कार्यों के साथ आप bubbles=false सेट कर सकते हैं लेकिन यह इनपुट सहायक के साथ काम नहीं करता है। धन्यवाद!

Answer 1

मैं पिछली बार इस पर काम करते समय एक ही समस्या में आया था।
यहां है, मेरे सलाहकार और मैंने क्या करने का फैसला किया।

App = Ember.Application.create(); 
 

 
App.Router.map(function() { 
 
    // put your routes here 
 
}); 
 

 
App.IndexRoute = Ember.Route.extend({ 
 
    model: function() { 
 
    return ['red', 'yellow', 'blue']; 
 
    } 
 
}); 
 

 
App.MyCheckboxComponent = Ember.Component.extend({ 
 

 
    isSelected: false, 
 
    actions: { 
 
    containerClicked: function(e) { 
 
     alert('container clicked'); 
 
    }, 
 
    test: function(e) { 
 
     this.toggleProperty('isSelected'); 
 
    } 
 

 
    } 
 

 
});

/* Put your CSS here */ 
 

 
html, 
 
body { 
 
    margin: 20px; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script> 
 
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script> 
 
<script type="text/javascript" src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script> 
 

 
<script type="text/x-handlebars"> 
 
    <h2>Welcome to Ember.js</h2> 
 
    {{outlet}} 
 
</script> 
 

 
<script type="text/x-handlebars" data-template-name="index"> 
 
    {{my-checkbox}} 
 
</script> 
 

 
<script type="text/x-handlebars" data-template-name="components/my-checkbox"> 
 
    <div {{action 'containerClicked'}} style="background-color:#cccccc;"> 
 
    {{#if isSelected}} 
 
    <input type="checkbox" {{action 'test' bubbles=false}} checked></input> 
 
    {{else}} 
 
    <input type="checkbox" {{action 'test' bubbles=false}}></input> 
 
    {{/if}} {{isSelected}} 
 
    </div> 
 
</script>

पुनश्च: मैं इस सबसे अच्छा समाधान है या नहीं पता नहीं है, सब मैं जानता हूँ कि यह सबसे अच्छा काम कर समाधान मुझे पता है कि .. :)

का आनंद लें ..