Ember 1.8 bind-attr in modals

[jgadbois]

I'm using the Foundation CSS framework Fancybox modal in my app.

In previous versions of Ember bind-attr worked fine in the modal, but in Ember 1.8, bind-attr no longer works.

UPDATE: Here's an example js bin http://emberjs.jsbin.com/fuhakezuga/2/edit?html,js,console,output

[stefanpenner]

@jgadbois please provide an example demonstrating the problem

http://emberjs.jsbin.com would be a good starting place

[jgadbois]

Sorry it's Fancybox, not Foundation modal - working on the jsbin now.

[jgadbois]

@stefanpenner Here's an example. Note the bound class on the <ul>:

http://emberjs.jsbin.com/xopixazeci/19/edit?html,js,console,output

[twokul]

@jgadbois it seems like the class gets applied correctly to ul when you click on li items.

There're also errors while trying to load fancybox.

[jgadbois]

@twokul - the js didn't load for you so you aren't clicking on the modal

[jgadbois]

@twokul - i updated the js/css to use a CDN instead of hotlinking - not sure why the assets didn't load for you but try this link instead:

http://emberjs.jsbin.com/fuhakezuga/2/edit?html,js,console,output

[herom]

@jgadbois If you want to use {{bind-attr}} and bind a "static" CSS class, like you did, you have to prefix it with a ':', so instead of doing {{bind-attr class="curItem"}} you have to use {{bind-attr class=":curItem"}} and it will work.

See my updated jsbin example: http://emberjs.jsbin.com/hidimoquva/1/edit

[jgadbois]

@herom I don't want a static class in this case I want it bound to curItem

[herom]

So, you should not use any ' or " for the bound attribute, like {{bind-attr class=curItem}} which works if you set a curItem property on your controller beforehand. But it won't update, so it's not bound to the property or at least it doesn't get notified of the change which seems like a bug to me too...

[jgadbois]

@herom you can use quotes for bound attributes. In fact, I believe you have to for more complicated class bindings like {{bind-attr class=":staticClass boundClass"}} or {{bind-attr class="curItem:selected:notSelected"}}

[herom]

@jgadbois I see, thanks :+1:

[jgadbois]

@herom great! I'm guessing it's something to do with the way that the modal manipulates the dom, but this worked fine in the older version of ember I was using.

[jgadbois]

@stefanpenner can we remove the unverified tag based on the jsbin?

[wagenet]

I just updated the JSBin to Ember 1.9. There's now a different error about trying to bind-attr on an element not in the DOM. The underlying issue now is that fancybox is changing the DOM in ways that the view is not aware of. Basically, you shouldn't have non-Ember libraries affecting DOM that has bindings or is otherwise controlled by Ember.

[jgadbois]

@wagenet So is there a recommended way to use modals? It's a very common use case (and for some reason it did work previously).

[xkb]

@jgadbois The cookbook in the guides has a very good article on modals that can get you started.