Templates 模板连接

如何在EmberJs上的模板上连接字符串（或如何添加类）

前

//这个div我想添加一个类go，这是正确的方法吗？
现在就飞
//还是像这样？
现在就飞

余烬指南中对此进行了完整的讨论：

但你会这样做：

<div {{bind-attr class="isGo"}}>Fly now</div>

---

bind attr

过去是解决余烬渲染限制的一种好方法。现在有了HTMLbars，Ember建议我们不要使用

bind attr

，因为我们有更强大的方法

Ember 1.13不推荐使用bind attr，支持新语法。

在ember twiddle上可以看到两种建议方法的工作示例，如下所示：

方法1 如果要在车把模板内进行组合，可以执行以下操作：

<div class={{concat "fly " isGo}}>Fly now</div>

然后在车把模板中：

<div class={{flyingClass}}>Fly now</div>

现在就飞

---

这两种方法之间的主要区别取决于您希望如何分离关注点。现在只执行方法1可能更容易，但随着条件变得更加复杂，您可以在computed属性中隐藏更多的工作。

这在Hi中有很好的记录，感谢您的回复。我明白了，我必须将它绑定到一个控制器中，但我只是想知道“关于这个“导出默认值”，这是一个有效的表达式吗？对不起，这是ES6格式，在传统的JavaScript中，您将使用

App.ThingController=Ember.ObjectController.extend…

等。我已经更改了答案。我还建议这样做

<div class={{concat "fly " isGo}}>Fly now</div>

  flyingClass: Ember.computed('isGo', function() {
    // return a string with 'fly' and the value of
    // isGo. Will be updated if isGo changes.
    // Array values are created with space delimited by
    // ['className', 'anotherClassName', 'lastClastName'].join(' ');
    // => "className anotherClassName lastClassName"
    let going = this.get('isGo') ? 'going' : ''
    return ['fly', going].join(' ');
  })

<div class={{flyingClass}}>Fly now</div>