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

Question

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

possible duplicate of [How to get the value of a checkbox of a template in the controller in ember app](http://stackoverflow.com/questions/20668285/how-to-get-the-value-of-a-checkbox-of-a-template-in-the-controller-in-ember-app) — givanse, Nov 24 '14 at 17:29

score 64 · Answer 1 · edited Dec 07 '15 at 22:57

64

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

edited Dec 07 '15 at 22:57

Justin Proctor

3
1

answered Nov 10 '15 at 13:00

Kori John Roys

2,621
1
19
27

2

Given that `Ember.observers` are something of an anti-pattern in Ember 2.0+, this is a much better solution. – James Conkling Feb 19 '16 at 22:51
2

Great update, it's important to note using the bracket input won't bind the checked property to `isChecked` all it does is set the properties initial value. – Kingpin2k May 12 '16 at 17:52
In that case how do you get that binding? We'd like to do a one-way bound input component but can't seem to force the checked value of the input element to its value on the component. – Adam Donahue Jun 05 '16 at 22:47
8

AdamDonahue I believe you can just use the `{{input}}` for your case. `{{input type="checkbox" checked=isChecked click=(action "foo" value="target.checked")}}`. Or if you have your heart set on using an angle bracket component you can update the value yourself in the click action. I made an example, take a look at the second checkbox option here: https://ember-twiddle.com/1d4a34f437a66f306ee5d6c5389fb4e2 – Kori John Roys Jun 06 '16 at 08:50
1

I am late to the party. 'change' is about the same as 'click'. – Alpha Huang Sep 13 '18 at 21:09

Kingpin2k · Accepted Answer · 2014-07-23T02:36:58.067

24

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

edited Jul 23 '14 at 02:36

answered Jun 11 '14 at 05:19

Kingpin2k

47,277
10
78
96

How would I use an observer if there are multiple checkboxes? I have a Category model and I am going to loop through each Category and create a corresponding checkbox. These checkboxes will be used to set which categories are selected. – Corey Quillen Jun 11 '14 at 05:39
2

You would use an itemController, and attach each checkbox to a property on the itemController with the observer on the itemController. http://emberjs.com/api/classes/Ember.ArrayController.html – Kingpin2k Jun 11 '14 at 05:45
fields are not resetting when back to another url , please suggest a solution. – Durga Prasad Jan 28 '15 at 09:22
3

Observers are not a good solution to this. Use actions like `on="key-up" action="doSomething"` instead. See https://youtu.be/7PUX27RKCq0 for Stefan Penner's explanation of why observers are poor performers and generally not a good idea. – caligoanimus Jun 25 '15 at 00:15
3

This answer is over a year old, I've got 100s of answers that are likely deprecated or not recommended anymore, feel free to answer with a more appropriate answer where you see fit. – Kingpin2k Jun 25 '15 at 14:35

score 12 · Answer 3 · edited Feb 27 '19 at 16:27

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

I just struggled with implementing this a bit and found this explanation of this exact situation helpful. http://www.thesoftwaresimpleton.com/blog/2015/02/12/emberjs-data-down/ — Confused, May 10 '15 at 23:45

score 8 · Answer 4 · answered Jun 12 '18 at 04:19

8

For those using Ember > 2.x:

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

and the action:

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

answered Jun 12 '18 at 04:19

Rimian

36,864
16
117
117

score -3 · Answer 5 · answered Nov 02 '15 at 16:01

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

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

5 Answers5

Template

Code

Example

Custom Checkbox

Custom View

Example

Linked