如何使用 ref.view-模型功能

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 的值属性绑定到页面 VM 的 eventDate 属性。更重要的是，我们为 DatePicker 自定义元素的 VM 创建了一个别名，并将其命名为 eventDateVM。然后我们使用这个别名来显示在自定义元素中选择的日期的月份和星期几。这个虚构的 DatePicker 也有一个 VM 属性，它被设置为 url 以获取所选日期发生的事情的图片，因此我们将 url 绑定到 src 属性一个 img 标签。

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

如何使用 ref.view-模型功能

how to use the ref.view-model feature

aurelia