How does bind-attr work in ember.js?

Question

I haven't created an application yet, but the bind-attr documentation is embarrassing for me. It says that you can do something like:

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

With 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 template:

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

To produce:

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

How does Ember know that this is the src attribute in the first example and the class attribute in the second example? If I don’t miss something here, it doesn’t seem like it is really possible.

Answer 1

The documentation seems to be wrong. Running the code indicated in the documents, 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, would look great. You need to specify the appropriate attribute:

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

Here's a working example (remove the attribute name and find the error in the console).