如何使用 ref.view-model 功能

Question

我在文档中看到了此功能，但我无法从该信息中完全弄清楚如何使用它。

它说：

<i-produce-a-value ref.view-model="producer"></i-produce-a-value>
<i-consume-a-value input.bind="producer.output"></i-consume-a-value>

这在现实世界的例子中是什么样子？

Answer 1

此语法实际上已更改为与我们最新版本中的 Aurelia 绑定语法的其余部分更加一致（在您发布此问题后出现）。

现在的语法是：

<i-produce-a-value view-model.ref="producer"></i-produce-a-value>
<i-consume-a-value input.bind="producer.output"></i-consume-a-value>

但无论如何，

view-model.ref="producer"

为

i-produce-a-value

自定义元素创建视图模型的别名，然后您可以在其他地方使用该别名来传递给另一个自定义元素或使用VM的属性。因此，在上面代码的第二行中，

i-consume-a-value

有一个名为

input

的属性，该属性已绑定到

output

元素的 VM 的

i-produce-a-value

属性。

让我们看一个例子。假设您有一个

DatePicker

自定义元素。它的视图模型具有多个属性，例如

dayOfWeek

和

month

。您想使用视图中其他元素的属性。您可以将 View 的 VM 上的属性绑定到其中每个属性，然后绑定到视图中要使用这些值的其他位置的 View 属性，或者您可以使用

view-model.ref

来允许您直接绑定到这些值在您的

DatePicker

自定义元素上。像这样的东西：

<date-picker value.bind="eventDate" 
             view-model.ref="eventDateVM"></date-picker>
<div>
  <p>Event Month: ${eventDateVM.month}</p>
  <p>Event Day of Week: ${eventDateVM.dayOfWeek}</p>
  <img src.bind="eventDateVM.dayInHistoryImageUrl" />
</div>

因此，在本示例中，我们将

DatePicker

的 value 属性绑定到页面 VM 的

eventDate

属性。更重要的是，我们为

DatePicker

自定义元素的 VM 创建了一个别名，并将其命名为

eventDateVM

。然后，我们使用此别名来显示自定义元素中选取的日期的月份和星期几。这个虚构的

DatePicker

还有一个 VM 属性，该属性设置为所选日期发生的某件事的图片的 url，因此我们将该 url 绑定到

src

标签的

img

属性。

如果您对 Aurelia 的这个非常强大的功能还有任何疑问，请告诉我！

Answer 2

仅更新：在 Aurelia 2 中，语法 已更改为

<i-produce-a-value component.ref="producer"></i-produce-a-value>