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

2.1: <a href={{condition}}> results in <a href="null"> after condition was dynamically set to null #12358

Closed
lolmaus opened this issue Sep 17, 2015 · 8 comments

Comments

@lolmaus
Copy link
Contributor

lolmaus commented Sep 17, 2015

So you've got this in your template:

<a href={{condition}}>

condition is null, and it correctly renders to <a>.

But then you change condition dynamically.

When condition is null again, it renders as <a href="null">.

Demo (thx to @alexspeller): http://ember-twiddle.com/a0a8088d67b451817902

@pixelhandler
Copy link
Contributor

@lolmaus I guess the work around is to use an if/else rather than the condition for this use case.

Seems like the attr is bound by default and the condition determines the value of the attribute.

I'm not sure if the first rendering is just fixed by the browser or by the JS. but it appears in your example that mucking with the value breaks and shows an empty href attr.

If you want the href attr binding to be present or not based on the condition it seems more reliable to use an if/else or define a component that sets up the attribute binding for href based on a property of the component.

@lolmaus
Copy link
Contributor Author

lolmaus commented Sep 18, 2015

@pixelhandler the if helper doesn't help, see the example above.

@dylanmensaert
Copy link

It seems to work for attributes other than href: http://emberjs.jsbin.com/leyehe/edit?html,js,output

So href is definitely bugged.

@pixelhandler
Copy link
Contributor

@lolmaus I meant using the if / else in your template instead of relying on a conditional in the value assignment to the html attribute href.

{{#if hasURL}}
  <a href="{{url}}">GO</a>
{{else}}
  <a>WAT</a>
{{/if}}

Seems like a gamble to expect the value assignment to the attribute to indicate whether or not the attribute should present and empty, missing, or to be present with a value - and the expected browsers to behave accordingly.

@stefanpenner
Copy link
Member

I suspect this may be related to href being special cased, and not reflected...

@lolmaus
Copy link
Contributor Author

lolmaus commented Sep 21, 2015

@pixelhandler That would result in code duplication. It gets really burdensome when your link content is complex.

@pixelhandler
Copy link
Contributor

@lolmaus this issue has been inactive for some time, do you still have this issue?

@lolmaus
Copy link
Contributor Author

lolmaus commented Sep 9, 2017

I don't think so. Will repoen if I run into this again or someone reports it.

@lolmaus lolmaus closed this as completed Sep 9, 2017
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

5 participants