Boolean component attributes in attrs-hash


#1

When using the new attrs: {} hash in components with Ember 1.13.0-beta.1, boolean values are treated somehow strange.

If I have a controller with the property controllerOpen: true, and in the template I have something like this: {{test-component open=controllerOpen}}, then the usage of attrs.open is not entirely clear - it is not a boolean, but an object? Which means that something like this.toggleProperty("attrs.open"); does not work as expected.

In order to show what I mean, I made a quick jsbin: http://emberjs.jsbin.com/togidogune/2/edit?html,js,output

In the example, I can either change the attribute in the component, or in the controller. When I change it in the controller, it works as expected, but when I change it in the component, it doesn’t. In the console, you can see the actual value of attrs.open.

Is there a reason why boolean attributes are passed in as objects? In my opinion, this is very unintuitive - how am I supposed to change the boolean attribute from inside of the component?


#2

In Ember 1.13 the following:

{{some-thing name=localProperty}}

Is automatically translated to the following during template compilation:

{{some-thing name=(mut localProperty)}}

For SemVer/backward compatibility reasons Ember 1.x must continue to have mutable two-way bindings enabled by default. This means that every bound property path from a template invocation (like name in the example above) is transformed into a “mutable object”. A mutable object has a value property and an update method (the update method is how it can be set and cause upward data flow). When you access the attribute in the .attrs hash, you are “seeing” the mutable object.


Because this is somewhat odd (did I get a mutable object? do I need to call this.attrs.name.value or just this.attrs.name? etc), there is a new public API to return the attribute value (mostly useful for the 1.x timeframe while we do the auto-wrapping). To use this, you simply do this.getAttr('name'), if this.attrs.name was a mutable value then it will return this.attrs.name.value otherwise it returns this.attrs.name.


FYI - For angle bracket components (and likely all components in Ember 2.0) you will be required to use the (mut) sub-expression to explicitly provide a mutable value.


Docs and guides are being written to make this much clearer, but hopefully, this “dump” was helpful to folks in the interim…


#3

Has there been any progress in the docs for this? I was just looking through the 2.0 docs for components etc. and couldn’t find any references about how to use attrs.


#4

Is this.getAttr('name') an officially supported method going forward? It’s not in the docs for 1.13.x or even 2.2.x. Is this something we should feel safe using?