Ember checkbox input helper

Question

Ich versuche eines von Embers Checkbox-Eingabehelfern zu verwenden, das innerhalb eines div mit einer zugewiesenen Aktion platziert wird. Das Problem, das ich habe, besteht darin, dass das Anklicken des Kontrollkästchens nicht korrekt funktioniert und stattdessen der Aktions-Helfer des Containers aufgerufen wird.

App.MyCheckboxComponent = Ember.Component.extend({ 

    isSelected: false, 

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

}); 

habe ich eine fiddle dies in Aktion zu zeigen. Weiß jemand, wie ich das verhindern kann?

Ich möchte für klicken Sie auf das Kontrollkästchen zu aktualisieren Sie seinen gebundenen Wert.

Während klicken außerhalb des Kontrollkästchens Container sollte die Aktion auslösen, die mit dem Container verbunden ist.

Mit allgemeinen Aktionen können Sie bubbles=false setzen, aber dies scheint nicht mit Eingabehilfen zu arbeiten. Vielen Dank!

Answer 1

Ich stieß genau auf das gleiche Problem, als ich das letzte Mal daran gearbeitet habe.
Hier ist, was mein Mentor und ich beschlossen zu tun.

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>

PS: Ich weiß nicht, diese beste Lösung ist oder nicht, weiß ich nicht, dass es am besten funktionierende Lösung ist, ich weiß .. :)

Genießen ..