Déclencher une action sur L'événement de changement avec Ember.aide à l'entrée de la case à cocher js?
Comment puis-je déclencher une action nommée lors de la modification d'une case à cocher dans Ember.js? Toute aide sera grandement appréciée.
Voici ce que j'ai. Cocher ou décocher la case n'a aucun effet.
Modèle:
{{input type="checkbox" on="change" action="applyFilter"}}
Contrôleur:
actions: {
applyFilter: function() {
console.log("applyFilter");
}
}
5 réponses
L'utilisation d'un observateur semble être le moyen le plus simple de regarder une case à cocher changer
Modèle
{{input type='checkbox' checked=foo}}
Code
foo:undefined,
watchFoo: function(){
console.log('foo changed');
}.observes('foo')
Exemple
Http://emberjs.jsbin.com/kiyevomo/1/edit
Ou vous pouvez créer votre propre implémentation de la case à cocher qui envoie une action
Case À Cocher Personnalisée
App.CoolCheck = Ember.Checkbox.extend({
hookup: function(){
var action = this.get('action');
if(action){
this.on('change', this, this.sendHookup);
}
}.on('init'),
sendHookup: function(ev){
var action = this.get('action'),
controller = this.get('controller');
controller.send(action, this.$().prop('checked'));
},
cleanup: function(){
this.off('change', this, this.sendHookup);
}.on('willDestroyElement')
});
Vue Personnalisée
{{view App.CoolCheck action='cow' checked=foo}}
Exemple
Je voudrais poster une mise à jour à ce sujet. Dans Ember 1.13.3+, vous pouvez utiliser ce qui suit:
<input type="checkbox"
checked={{isChecked}}
onclick={{action "foo" value="target.checked"}} />
Post Ember version > = 1.13 voirla réponse de Kori John Roys .
Ceci est pour les versions Ember avant 1.13
C'est un bug dans l'Assistant {{input type=checkbox}} d'ember.
Voir https://github.com/emberjs/ember.js/issues/5433
J'aime l'idée d'avoir un remplaçant. La solution de @ Kingpin2k fonctionne, mais l'accès aux vues globalement est obsolète et l'utilisation d'observateurs n'est pas géniale.
Dans le problème lié à GitHub ember, rwjblue suggère un composant version:
App.BetterCheckboxComponent = Ember.Component.extend({
attributeBindings: ['type', 'value', 'checked', 'disabled'],
tagName: 'input',
type: 'checkbox',
checked: false,
disabled: false,
_updateElementValue: function() {
this.set('checked', this.$().prop('checked'));
}.on('didInsertElement'),
change: function(event){
this._updateElementValue();
this.sendAction('action', this.get('value'), this.get('checked'));
},
});
Exemple d'utilisation dans un modèle ("cochées" et "personnes handicapées" sont facultatifs):
{{better-checkbox name=model.name checked=model.checked value=model.value disabled=model.disabled}}
Pour ceux qui utilisent Braise > 2.x:
{{input
change=(action 'doSomething')
type='checkbox'}}
Et l'action:
actions: {
doSomething() {
console.warn('Done it!');
}
}
Dans Ember v1. 13, cela peut être fait simplement en créant un composant nommé j-check dans mon occasion(aucun contenu de mise en page requis):
import Ember from 'ember';
export default Ember.Checkbox.extend({
change(){
this._super(...arguments);
this.get('controller').send(this.get('action'));
}
});
Et puis vous l'appelez simplement à partir de votre modèle comme ceci:
{{j-check checked=isOnline action="refreshModel" }}