如何使用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>

因此,在此示例中,我们将value属性绑定DatePicker到eventDate页面VM 的属性.更重要的是,我们为DatePicker自定义元素的VM创建了一个别名并命名了它eventDateVM.然后,我们使用此别名显示自定义元素中拾取的日期的月份和星期几.这个虚构DatePicker还有一个VM属性,设置为所选日期发生的事物的图片的url,因此我们将该url绑定到标记的src属性img.

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