Question

I haven’t actually built an app yet, but I’m confused by documentation on bind-attr. It says you can do something like:

App.LogoView = Ember.View.extend({
  logoUrl: 'http://www.mycorp.com/images/logo.png'
});

With a template:

<div id="logo">
  <img {{bind-attr =logoUrl}} alt="Logo" />
</div>

To produce:

<div id="logo">
  <img src="http://www.mycorp.com/images/logo.png" alt="Logo" />
</div>

And Similarly:

App.AlertView = Ember.View.extend({
  priority: "p4",
  isUrgent: true
});

With a template:

<div {{bind-attr =priority}}>
  Warning!
</div>

To produce:

<div class="p4">
  Warning!
</div>

How does Ember know it was the src attribute in the first example and a class attribute in the second example? Unless I’m missing something here, this doesn’t seem like it’s really even possible.

Answer 1

The documentation appears to be wrong. Running the code as listed in the docs, I get the following error:

Uncaught Error: Parse error on line 4:
...    <img {{bind-attr =logoUrl}} alt="Lo
-----------------------^
Expecting 'CLOSE', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'SEP'

Running the code as you would expect it to look works fine. You need to specify the attribute in question:

<div id="logo">
    <img {{bind-attr src=logoUrl}} alt="Logo">
</div>

Here’s a working example (remove the attribute name and look for the error in the console).