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");
    }
}
35
demandé sur Corey Quillen 2014-06-11 09:00:28

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

Http://emberjs.jsbin.com/kiyevomo/6/edit

25
répondu Kingpin2k 2014-07-23 02:36:58

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"}} />

Lien vers la source

58
répondu Kori John Roys 2015-12-07 22:57:48

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}}
12
répondu hewsonism 2018-09-18 12:25:58

Pour ceux qui utilisent Braise > 2.x:

{{input
  change=(action 'doSomething')
  type='checkbox'}}

Et l'action:

actions: {
  doSomething() {
    console.warn('Done it!');
  }
}
1
répondu Rimian 2018-06-12 04:19:02

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" }}
-3
répondu Alex Berdyshev 2015-11-02 16:01:27