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

Can I use the bool attribute with the custom tag? (like "disabled") #1618

Closed
hajimegane opened this issue Feb 22, 2016 · 5 comments
Closed
Milestone

Comments

@hajimegane
Copy link

I noticed that bool attributes cannot work in the custom tag's "opts".

<my-app>
  <button onclick="{toggle}">Click</button>
  <my-tag aaa="{this.flg}" disabled="{this.flg}"></my-tag>

  this.flg = false
  toggle() {this.flg = !this.flg}
</my-app>

<my-tag>
  <div>aaa: {opts.aaa}</div>
  <div>disabled: {opts.disabled}</div>
</my-tag>

1 click: aaa=true, disabled=null
2 click: aaa=null, disabled=disabled
3 click: aaa=true, disabled=disabled

But I expected below.
1 click: aaa=true, disabled=disabled
2 click: aaa=null, disabled=null
3 click: aaa=true, disabled=disabled

Or below.
1 click: aaa=true, disabled=true
2 click: aaa=null, disabled=null
3 click: aaa=true, disabled=true

Should I not use bool attributes with custom tags? (Or Should I use "opts.__disabled"?)
Thanks in advance for your answer.

@aMarCruz
Copy link
Contributor

@hajimegane , this bug was introduced by a change in riot which removes the attributes with falsy values except zero, so you can use a number:

  <my-app>
    <button onclick="{toggle}">Click</button>
    <my-tag aaa="{this.flg}" disabled="{this.flg}"></my-tag>
    this.flg = 0
    toggle() {this.flg ^= 1}
  </my-app>

  <my-tag>
    <div>aaa: {opts.aaa}</div>
    <div>disabled: {opts.__disabled}</div>
  </my-tag>

as you are right, disabled is __disabled, but it is better not to use this name because in future versions may be that this behavior change.

@hajimegane
Copy link
Author

@aMarCruz Thank you for your reply. I tried to set a number value into the disabled attribute but the result is not changed, so the value of opts.disabled is null -> "disabled" -> "disabled".

I think that the special bool attributes that start __ may be not necessary because all attributes with a expression, include not start __, remove automatically if the value is a falsy. And, whether the attribute is removed with the value zero should be unified regardless of the bool attributes such as disabled.
Is this my understanding the right?

Here is my validation code: http://plnkr.co/edit/ycy8moa3N4RrHSyrzCXe

@aMarCruz
Copy link
Contributor

@hajimegane it is so. The use of __ in boolean attributes comes from earlier versions of riot that support IE8 and it remains for compatibility with existing code, it is likely to be remove in future versions.

@GianlucaGuarini GianlucaGuarini added this to the 3.0.0 milestone Feb 23, 2016
@hajimegane
Copy link
Author

@aMarCruz I understand. Thank you.

@GianlucaGuarini
Copy link
Member

fixed in riot@3.0.0 http://plnkr.co/edit/OOznRNFpSUtk57gptMxr?p=preview

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

3 participants