Comment puis-je déclencher une action nommée en modifiant une case à cocher dans Ember.js? Toute aide sera fortement appréciée.
Voici ce que j'ai. Cochez ou décochez la case n'a aucun effet.
Modèle:
{{input type="checkbox" on="change" action="applyFilter"}}
Manette:
actions: {
applyFilter: function() {
console.log("applyFilter");
}
}
utiliser un observateur semble être le moyen le plus simple de regarder un changement de case à cocher
{{input type='checkbox' checked=foo}}
foo:undefined,
watchFoo: function(){
console.log('foo changed');
}.observes('foo')
http://emberjs.jsbin.com/kiyevomo/1/edit
Ou vous pouvez créer votre propre implémentation de la case à cocher qui envoie une action
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')
});
{{view App.CoolCheck action='cow' checked=foo}}
Je voudrais publier 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"}} />
Poster Ember version> = 1.13 voir réponse de Kori John Roys .
C'est pour Ember versions avant 1.13
Il s'agit d'un bogue dans l'assistant {{input type=checkbox}}
D'ember.
voir https://github.com/emberjs/ember.js/issues/54
J'aime l'idée d'avoir un remplaçant. La solution de @ Kingpin2k fonctionne, mais l'accès aux vues dans le monde est obsolète et l'utilisation d'observateurs n'est pas géniale.
Dans le github lié ember issue, rwjblue suggère une version de composant:
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é" et "désactivé" sont facultatifs):
{{better-checkbox name=model.name checked=model.checked value=model.value disabled=model.disabled}}
Pour ceux qui utilisent Ember> 2.x:
{{input
change=(action 'doSomething')
type='checkbox'}}
et l'action:
actions: {
doSomething() {
console.warn('Done it!');
}
}