ember.js 中的 bind-attr 是如何工作的？

Question

我实际上还没有构建一个应用程序，但是我对 bind-attr 上的文档感到困惑。它说您可以执行以下操作：

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

使用模板：

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

生产：

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

同样：

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

使用模板：

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

生产：

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

Ember 怎么知道它是第一个示例中的 src 属性和第二个示例中的 class 属性？除非我在这里遗漏了什么，否则这似乎是不可能的。

Answer 1

文档似乎有误。运行文档中列出的代码，我收到以下错误：

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

按照您的预期运行代码，它看起来可以正常工作。您需要指定相关属性：

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

这里是working example（去掉属性名并在控制台中查找错误）。