Emberjs 在 controller/route 的函数属性中添加 `.属性()`

Question

我正在尝试做与 this question

相同的事情

我真正的问题是他为什么要在errorClass属性中的函数末尾添加.property()？有人可以给我指点一下有关其工作原理的文档吗？

当我不包含 .property() 时，属性的字符串函数将作为值放置在我的模板中。

车把：

<div class="tab-pane fade show {{loginActiveClass}}" id="login" role="tabpanel">

期望：

<a data-toggle="tab" href="#login" role="tab" class="nav-link active">

当我丢弃 .property() 时会发生什么：

<a data-toggle="tab" href="#login" role="tab" class="nav-link function loginActiveClass() {
  return this.get('page') === 'login' ? 'active' : '';
}">

Answer 1

在您的 hbs 中使用 {{att}}，您可以访问名为 att.

的组件或控制器的 attribute/property 的值

根据您的描述，您的属性 loginActiveClass 的值类型为 function。这就是您在车把中得到的。因为你使用它的位置只接受字符串值，所以你得到你的值的 toString() 表示，对于函数来说是函数的代码作为字符串。

您无法通过在 .hbs 中使用 {{att}} 简单地访问它来触发函数代码的实际评估。

在末尾添加 .property() 会给你一个 computed 属性 确实评估函数和 returns 评估结果到"caller"。（请注意，Ember 中计算属性的首选语法不久前已更改为 something more explicit. I recommend using eslint and eslint-plugin-ember，以便让您的 IDE 或 ember 的 cli 在适当的时候通知您最佳实践.)

此外，在您的具体示例中，函数的 "logic" 很容易集成到 hbs 中：

<div class="tab-pane fade show {{if (eq page 'login') 'active'}}" id="login" role="tabpanel">

Emberjs 在 controller/route 的函数属性中添加 `.属性()`

Emberjs adding `.property()` in a function attribute of a controller/route

ember.js