aurelia - aurelia 中的 .bind 与字符串插值

Question

在我们的代码库中，我们混合了以下内容:

1. attribute="${something}"、attribute="${something | converter}"等
2. attribute.bind="something", attribute.bind="something | 转换器"

我发现后者更容易阅读。

我所指的例子与上面的完全一样；即，它们不添加任何额外的字符串内容。

我认为 Aurelia 也更容易。我说得对吗？

此外，对于这些没有实际插值的特定情况涉及到，第一种形式有什么好处吗？ (除了它之外少输入两个字符。)

Answer 1

鉴于您所展示的示例，我建议使用选项 2。它确实不是“在 Aurelia 上更容易”，但更明确的是您将该属性的值绑定(bind)到列出的属性。

下面是原始答案

第一个选项的好处是，例如，当您有一个接受多个值但作为单个字符串的属性时。最常见的例子是 class属性。 class属性接受空格分隔列表中的多个类:

<div class="foo bar baz"></div>

假设我们只想添加或删除类 baz从此列表中基于我们虚拟机上的 Prop someProp离开其他类(class)的时候。为此，请使用 .bind语法，我们必须在 VM 上创建一个具有完整列表但添加或删除 baz 的属性。由 someProp 的值确定。但是使用字符串插值绑定(bind)，这变得更简单:

 <div class="foo bar ${someProp ? 'baz' : ''}"></div>

您可以想象如何通过添加或删除多个类来扩展它。您可以使用 .bind 创建一个值转换器来执行此操作语法，但最终可能会出现一些不那么可读的内容。

我可以想象一个正在创建的值转换器在使用中可能看起来像这样:

 <div class.bind="someProp | toggleClass:'baz':'foo':bar'"></div>

我真的认为这比使用字符串插值语法的可读性要差得多。

顺便说一句，我上面想象的值转换器看起来像这样:

export class ToggleClassValueConverter {
  toView(value, toggledClass, ...otherProps) {
    return `${otherProps.join(' ')} ${value ? toggledClass : ''}`;
  }
}

最好的部分是我仍在值转换器中使用字符串插值:-)