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的{{1}}属性标签

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

如何使用ref.view-model功能

1 个答案: