Trigger an action on the change event with Ember.js checkbox input helper?

问题

How can I fire a named action upon changing a checkbox in Ember.js? Any help will be greatly appreciated.

Here is what I have. Checking or unchecking the checkbox has no effect.

Template:

{{input type="checkbox" on="change" action="applyFilter"}}

Controller:

actions: {
    applyFilter: function() {
        console.log("applyFilter");
    }
}

回答1:

using an observer seems like the easiest way to watch a checkbox changing

Template

{{input type='checkbox' checked=foo}}

Code

  foo:undefined,
  watchFoo: function(){
    console.log('foo changed');
  }.observes('foo')

Example

http://emberjs.jsbin.com/kiyevomo/1/edit

Or you could create your own implementation of the checkbox that sends an action

Custom Checkbox

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')
});

Custom View

{{view App.CoolCheck action='cow' checked=foo}}

Example

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

回答2:

I'd like to post an update to this. In Ember 1.13.3+, you can use the following:

<input type="checkbox" 
       checked={{isChecked}} 
       onclick={{action "foo" value="target.checked"}} />

link to source

回答3:

Post Ember version >= 1.13 see Kori John Roys' answer.

This is for Ember versions before 1.13

This is a bug in ember's {{input type=checkbox}} helper.

see https://github.com/emberjs/ember.js/issues/5433

I like the idea of having a stand-in. @Kingpin2k's solution works, but accessing views globally is deprecated and using observers isn't great.

In the linked github ember issue, rwjblue suggests a component 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'));
  },
});

Example usage in a template ('checked' and 'disabled' are optional):

{{better-checkbox name=model.name checked=model.checked  value=model.value disabled=model.disabled}}

回答4:

For those using Ember > 2.x:

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

and the action:

actions: {
  doSomething() {
    console.warn('Done it!');
  }
}

回答5:

In Ember v1.13 it can be done simply by creating a component named j-check in my occasion(no layout content required):

import Ember from 'ember';

export default Ember.Checkbox.extend({
  change(){
    this._super(...arguments);
    this.get('controller').send(this.get('action'));
  }
});

And then you just call it from your template like this:

{{j-check checked=isOnline action="refreshModel" }}

来源：https://stackoverflow.com/questions/24154974/trigger-an-action-on-the-change-event-with-ember-js-checkbox-input-helper

标签

ember.js