"Bound attributes are not yet supported in Ember.js"

1

I am using the latest version of Ember/Ember CLI (1.10.0-beta.1) with Polymer and I am getting this error:

“Bound attributes are not yet supported in Ember.js”

when I try to pass a variable to a Polymer component:

<display-box class="box" flex theTitle={{theTitle}} posts={{postsArray}} ></display-box>

Polymer actually expect properties passed thus: posts=“{{postsArray}}”

If I do the following, it works somewhat; that is, the variable is not interpolated, but instead passed on the Polymer Component as is, as the string, “theTitle”:

<display-box class="box" flex theTitle=theTitle posts=postsArray ></display-box>

So the Polymer component displays this: theTitle

And the postsArray variable is also passed as the string, “postsArray.”

Who will be so kind to help me resolve this in a jiffy, so wonderful to save me from going bonkers, so clever to make me say, “ah ha, so that’s it”?

2

“Bound attributes” are coming in 1.11, but are behind a feature flag in Canary right now. So you’ll have to use {{bind-attr theTitle=theTitle}} for now.

<display-box class="box flex" {{bind-attr theTitle=theTitle}} {{bind-attr posts=postsArray}}></display-box>

Beyond that, if “display-box” is an Ember component then you’ll need to use the curly brackets for that instead.

{{#display-box class="box flex" theTitle=theTitle posts=postsArray}}{{/display-box}}
3

Thanks a lot, Panman8201. So that’s how its done.

When I use Ember 1.10.0.beta-1, your bind-attr suggestion works for bound properties that are strings, but not for properties that are arrays or objects. So I am half-way there, I presume. This is the error I am getting for array/object properties:

"Uncaught Error: Assertion Failed: Attributes must be numbers, strings or booleans, not [[object Object],[object Object]]"

In a follow up post, after I resolve this issue, I will share how the latest version of canary is throwing an error with the Polymer components, while Ember 1.10.0-beta-1 is working just fine with the same Polymer components.

4

“Uncaught Error: Assertion Failed: Attributes must be numbers, strings or booleans, not [[object Object],[object Object]]”

Are you sure it’s not because of {{bind-attr theTitle=theTitle}}, since “theTitle” is used for both the attribute name and value. You should try renaming one or the other.

If it truly is the other, {{bind-attr posts=postsArray}}, then do you have another property on the controller/view with the name of “posts”?

5

{{bind-attr}} and <div someThing={{foo-bar}}></div> are both going to ultimately call element.setAttribute, and you cannot call element.setAttribute('theTitle', ['adsf', 'basdf']);.

If you were to write this in plain HTML what would you need/want it to be (assuming for a second that the dynamicism wasn’t an issue)? Could you provide a JSBin (possibly one with Ember and one with plain HTML + Polymer) so we can poke at it a bit more?

6

I simply want to pass an array (that same array I can’t access above) to this Polymer component; note that it is called arrayOfAnswers here:

<display-box {{bind-attr aTitle=theTitle}} {{arrayOfAnswers}}></display-box>

I should note that this bit is working fine on the Polymer component. I can’t pass arrays, though:

{{bind-attr aTitle=theTitle}}
7

@rwjblue I see what you mean, there are no array attributes. Side question, will this work with custom element Components? Eg, doesn’t it work now as {{foo-bar anArray=myArray}} and in 1.11 <foo-bar anArray={{myArray}}>?

8

How? Specifically, what HTML output do you need/want to be passed to the Polymer component? Without this, we cannot help you get this working.

9

Hi rwjblue, I want to pass just data, not HTML. I want to pass an array or an object, preferably bound data. As I noted above, I could pass a string successfully and it binds.

Within Polymer, you can pass all sorts of data (aka attributes) to a Polymer component in either of the following two ways:

<display-box myArray="{{anArray}}" mySecondArray='[{"name":"Bob"}, {"name":"Pamela"}]'></display-box>
10

@lamboo Can you share a JSBin that we can iterate on? My understanding is that polymer binds to properties so you will need to enable the bound-attributes feature flag and use foo={{bar}} for it to work.