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

时间:2012-06-14 07:57:44

标签: binding ember.js

我还没有真正构建应用程序,但我对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属性?除非我在这里遗漏了一些东西,否则这似乎不太可能。

1 个答案:

答案 0 :(得分:14)

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

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(删除属性名称并在控制台中查找错误)。