Ember.js: Input type=checkbox isn't a component

[ctataryn]

Although this issue was closed (https://github.com/emberjs/ember.js/pull/3935), I think it would be worthwhile to support {{input type="checkbox" action="someaction"}}.

In developing my app I could not actually wire up an action to a checkbox in this manner.

Although according to the referenced issue this would be a "breaking change", I believe it would add symmetry (and reduce confusion)

cc @stefanpenner (this even confused the mighty one)

[knownasilya]

:+1: Totally flaked out for a bit and thought that you were saying that you can't do {{input type='checkbox'}}.. but you're referring to the fact that it's not a component internally and doesn't support actions.

This issue might also be slightly related to https://github.com/emberjs/rfcs/pull/2

[rwjblue]

Making your own checkbox component is extremely straightforward:

http://emberjs.jsbin.com/rwjblue/58/edit

For the reasons stated in https://github.com/emberjs/ember.js/pull/3935#issuecomment-33879541 we cannot change Ember.Checkbox to be a subclass of Ember.Component.

[stefanpenner]

@rwjblue {{input type="checkbox"}} should be a component, Ember.CheckBox should remain the same. This addresses the concern from #3935

{{input}} and {{input type="checkbox"}} behavior totally differently is a mind-fuck

[rwjblue]

{{input type="checkbox"}} currently just uses Ember.CheckBox (see here).

I am absolutely sorry that this is mentally complicated, but we cannot change either {{input type="checkbox"}} or Ember.Checkbox to a Component without breaking backwards compatibility. I attempted to fix exactly this disconnect in #3935, but that was correctly declined.

[stefanpenner]

@rwjblue we should consider introducing Ember.CheckBoxComponent and deprecating Ember.CheckBox (to be removed in 2.0).

{{input... }} then uses Ember.CheckBoxComponent and leaves the Ember.CheckBox alone.

The fact that the component syntax {{input gives you a component for type="text" but not type="checkbox" is an unfortunately a bug.

This will affect people who use reopen Ember.CheckBox and use {{input type="checkbox"}} but they can very easily switch to {{view Ember.CheckBox}}

We might have to be careful how this is released, but it will prevent some early gray hair.

[rwjblue]

Slight correction {{input}} is helper syntax (as components require a dash). Also, we have deprecated {{view AccessSomeGlobal}}.

[asteinlein]

As a newcomer to Ember, a huge +1 from me (and everyone in my company) on cleaning this up for Ember 2.0 or whenever. We wasted a lot of time with this until we found this thread.

[stefanpenner]

@asteinlein I have also wasted an embarrassing amount of time on this one.

@rwjblue you are correct via globals, but they can easily import / export Ember.CheckBox.extend in there own app and use {{view 'check-box'}}

I believe we should and can change {{input type="checkbox"}} to be a component but leave Ember.CheckBox as a view.

[rwjblue]

@stefanpenner - I respectfully disagree. We cannot change {{input type="checkbox"}} to use a component within a 1.X release without breaking our SemVer contract.

But I do completely sympathize and want this changed to use a component in 2.0, if you recall I submitted a PR that did just that but the PR was declined because of SemVer impact.

[knownasilya]

@rwjblue what about making a ember-cli addon version, for those suffering?

[stefanpenner]

@rwjblue what breaks?

The past complaints where people who subclasses TextField for there own TextFields not the `{{input`` helper variant.

[wagenet]

@rwjblue ping.

[petrvolny]

Any news on this one?

[Restuta]

Yeah, just got hit by that..

[stefanpenner]

• [ ] see what glimmer changed here
• [ ] we MUST fix this for 2.0

[ef4]

I reviewed this on the glimmer branch, it is not yet fixed. Checkbox still inherits View and not Component, despite being registered in the container under the name component:-checkbox.

[stefanpenner]

cc @tomdale @wycats

[ronco]

:+1: would love to see this behavior consistent in 2.0.

[SirZach]

just want to comment on @rwjblue x-checkbox component, you need to add 'checked' to the attributeBindings array if you want to be able to programmatically set the checked value of the element. You'll also need to pass it in: {{x-checkbox checked=propertyBoundToCheckedState}}.

[KTKate]

Wasted _so_ much time on this.

At least put a warning, in bold, in the docs. It's a little misleading considering the 'actions' usage is explained only a line before 'checkboxes' on the Input Helpers guide page.

[SirZach]

@JKGisMe i feel ya, don't give up on ember due to this problem. i fully believe ember core team is going to make this a non-issue with ember 2.0!

[KTKate]

Well, I have a working, saving to the backend, checkbox. I used combination of the x-checkbox JSBin here and the explanation at http://www.thesoftwaresimpleton.com/blog/2015/02/12/emberjs-data-down/ The explanation was really helpful.

I don't know when Ember 2.0 will come out but it seems like a slippery slope to delay workable solutions. Especially when the situation is not well documented. It's already hard enough for a noob when the internets are full of the 'old Ember way' and you're trying to implement things in the 'new Ember way'. There is no reason something like this checkbox debacle couldn't have been included on the Ember guides. Checkboxes are a pretty basic element. I guess I find this to be equal part issue with Ember itself and issue with Ember documentation.

[rwjblue]

I don't know when Ember 2.0 will come out

The recent blog post should provide more detail.

[Restuta]

@JKGisMe this is open source project, so please help to improve documentation or really anything in the code. Community would greatly appreciate that.

[knownasilya]

@rwjblue thanks for that link.

[KTKate]

@Restuta I spent half my Sunday trying to make a checkbox. I don't think Ember wants me touching their code. ;)

Since Ember 2.0 is so close. Let's just pause our work projects and come back after it's here. We can contribute to Ember in the meantime.

[jfelchner]

I just ran into this and spent an hour on it until I gave up and finally found this. I hope this gets fixed for 2.0.

[rwjblue]

Fixed in #11396

[KTKate]

Yay, future generations of ember noobs will not know the struggle. :+1:

[gzurbach]

Hey guys, quick question here to clear out some confusion. I was looking at the code change (#11396) to make checkbox extend from view to component and I was wondering what the implications are...

Does this change mean that with the next release of Ember we will be able to write:

{{input type="checkbox" value=isChecked action="foo"}}

If so, when will foo be triggered? On change or on click or... something else?

Related question: are we gonna be able to write something like:

{{input type="checkbox" value=isChecked action="foo" on="click"}}

My issue right now is that I'd like to be notified when the user toggles the checkbox but not when I programmatically change its value. The only way for now to be notified of a change is to set an observer on the checkbox's value. Unfortunately the observer is being triggered both when the user clicks on the checkbox and when I toggle its value programmatically. I was therefore wondering is that change would help me accomplish what I'm trying to do.

[stefanpenner]

@gzurbach in ember 1.13.3 you can do the following

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

[gzurbach]

Awesome, I will do that then. Thanks for your quick reply @stefanpenner, as always!

[tcjr]

@stefanpenner After an embarrassing amount of debugging, I can verify this should be

checked={{isChecked}}

instead of

value={{isChecked}}