Helber input helber checkbox

Question

Sto provando a utilizzare uno degli helper di input della casella di controllo di Ember che è collocato all'interno di un div con un'azione assegnata ad esso. Il problema che sto avendo è che ora facendo clic sulla casella di controllo non funziona correttamente e invece viene chiamato l'helper azione del contenitore.

App.MyCheckboxComponent = Ember.Component.extend({ 

    isSelected: false, 

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

}); 

Ho creato un fiddle per mostrare questo in azione. Qualcuno sa come posso impedirlo?

mi piacerebbe per clic sulla casella-aggiornamento relativo valore limite.

Mentre clic al di fuori del contenitore casella dovrebbe innescare l'azione associata al contenitore.

Con le azioni generali è possibile impostare bubbles=false ma questo non sembra funzionare con gli helper di input. Grazie!

Answer 1

Mi sono imbattuto esattamente nello stesso problema quando ci ho lavorato l'ultima volta.
Ecco, ciò che il mio mentore e io abbiamo deciso di fare.

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: Non so questa è la soluzione migliore o no, tutto quello che so che è meglio soluzione di lavoro lo so .. :)

Godetevi ..