Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

attributeBinding for booleans broken in 2.7 #14024

Closed
vcipriani opened this issue Aug 4, 2016 · 8 comments
Closed

attributeBinding for booleans broken in 2.7 #14024

vcipriani opened this issue Aug 4, 2016 · 8 comments

Comments

@vcipriani
Copy link

In earlier versions, view attribute binding for boolean properties would have generated a tag similar to below:

<div id="ember444" bindingval="true" class="ember-view">

Now it is not displaying the attribute at all if false and doing the following if true

<div id="ember444" bindingval class="ember-view">

This can be verified by creating a brand new app and rendering a simple component setup like below.

import Ember from 'ember';

export default Ember.Component.extend({
    bindingVal: true,
    attributeBindings: ['bindingVal']
});

@pixelhandler
Copy link
Contributor

@vcipriani I believe that is the desired behavior for boolean attributes in HTML, See http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

I do not believe this is a bug.

@rwjblue
Copy link
Member

rwjblue commented Aug 4, 2016

I agree with @pixelhandler. If you do want bindingval="true" you should use the string "true" or "false".

@Serabe
Copy link
Member

Serabe commented Aug 4, 2016

Given the answers by @pixelhandler and @rwjblue, I'm closing this as not a bug. Thank you everybody!

@Serabe Serabe closed this as completed Aug 4, 2016
@vcipriani
Copy link
Author

I should have referenced this earlier, but the Ember documentation specifies the behavior we expected.

If the return value of an attributeBindings monitored property is a boolean the property's value will be set as a coerced string:

<input id="ember1" class="ember-view" disabled="false" />

Its easy enough to use a string, so I don't mind, but it seems like the docs should be updated and this should be noted as a change.

@dfreeman
Copy link
Contributor

dfreeman commented Aug 5, 2016

This broke a few of our tests that were using data- attributes as testing hooks — the behavior similarly changed for in-template cases like data-foo={{booleanValue}}.

The new behavior is definitely preferable (and, as @pixelhandler mentioned, correct), but it was surprising to discover, particularly since there was no mention in the changelog or release announcement.

@Serabe
Copy link
Member

Serabe commented Aug 5, 2016

Reopening for tracking the documentation change. Thank you!

@Serabe Serabe reopened this Aug 5, 2016
Serabe added a commit to Serabe/ember.js that referenced this issue Aug 6, 2016
From [HTML5, A vocabulary and associated APIs for HTML and
XHTML](https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes):

    A number of attributes are boolean attributes. The presence of a boolean
attribute on an element represents the true value, and the absence of the
attribute represents the false value.

    **Note:** The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be omitted
altogether.

Fixes emberjs#14024
@Serabe Serabe added the Has PR label Aug 6, 2016
@benjaminbalazs
Copy link

Was wondering if anyone has built a patch for this to behave as it used to?

@Serabe
Copy link
Member

Serabe commented Aug 15, 2016

No, but you can do so easily casting the boolean to a string in your function.

rwjblue pushed a commit that referenced this issue Aug 15, 2016
From [HTML5, A vocabulary and associated APIs for HTML and
XHTML](https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes):

    A number of attributes are boolean attributes. The presence of a boolean
attribute on an element represents the true value, and the absence of the
attribute represents the false value.

    **Note:** The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be omitted
altogether.

Fixes #14024

(cherry picked from commit 5d2175a)
rwjblue pushed a commit that referenced this issue Aug 15, 2016
From [HTML5, A vocabulary and associated APIs for HTML and
XHTML](https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes):

    A number of attributes are boolean attributes. The presence of a boolean
attribute on an element represents the true value, and the absence of the
attribute represents the false value.

    **Note:** The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be omitted
altogether.

Fixes #14024

(cherry picked from commit 5d2175a)
toddjordan pushed a commit to toddjordan/ember.js that referenced this issue Sep 9, 2016
From [HTML5, A vocabulary and associated APIs for HTML and
XHTML](https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes):

    A number of attributes are boolean attributes. The presence of a boolean
attribute on an element represents the true value, and the absence of the
attribute represents the false value.

    **Note:** The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be omitted
altogether.

Fixes emberjs#14024
webark pushed a commit to webark/ember.js that referenced this issue Oct 6, 2016
From [HTML5, A vocabulary and associated APIs for HTML and
XHTML](https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes):

    A number of attributes are boolean attributes. The presence of a boolean
attribute on an element represents the true value, and the absence of the
attribute represents the false value.

    **Note:** The values "true" and "false" are not allowed on boolean
attributes. To represent a false value, the attribute has to be omitted
altogether.

Fixes emberjs#14024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants