How to bind a value to “data-*” attribute using “bindAttr”?

Question

I’m trying to bind a value to a custom data- attribute using bindAttr like this:

<a {{bindAttr data-foo="content.foo"}}>

This doesn’t seem to work as I get a parse error:

Error: Parse error on line 16:
...}}         <a {{bindAttr data-foo="content.foo
----------------------^
Expecting 'CLOSE', 'STRING', 'ID', 'SEP'

Using dataFoo instead works, though.

So is this not possible with SproutCore/Handlebars.js and I have to (ab-)use a different attribute?

Answer 1

Have you considered just doing this:

<a data-foo="{{content.foo}}">