Sposób korzystania z funkcji ref.view-model

Question

Widzę tę funkcję w dokumentach, ale nie mogę się dowiedzieć, jak jej użyć z tych informacji.

To mówi: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> 10 Jak to wygląda w rzeczywistym świecie?

Answer 1

Ta składnia została zmieniona tak, aby była bardziej zgodna z resztą wiążącej składni Aurelia w naszym najnowszym wydaniu (które pojawiło się po opublikowaniu tego pytania).

Składnia jest teraz:

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

Ale tak czy inaczej, view-model.ref="producer" tworzy alias do widoku model dla elementu i-produce-a-value niestandardowego, które można następnie wykorzystać w innym miejscu, aby przejść do innego niestandardowego elementu lub użyj właściwości VM. Tak więc w drugim wierszu powyższego kodu i-consume-a-value ma właściwość o nazwie input, która została powiązana z właściwością output maszyny wirtualnej elementu i-produce-a-value.

Spójrzmy na przykład. Powiedzmy, że masz niestandardowy element DatePicker. Jego model widoku ma kilka właściwości, takich jak dayOfWeek i month. Chciałbyś użyć właściwości w innych elementach widoku. Można powiązać właściwość z maszyny wirtualnej widoku z każdą z tych właściwości, a następnie powiązać właściwości widoku w innym miejscu w widoku, w którym mają być używane te wartości, lub można użyć wartości view-model.ref, aby umożliwić bezpośrednie powiązanie z tymi wartościami w DatePicker element niestandardowy. Coś takiego:

<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> 

Tak więc, w tym przykładzie, mamy związane właściwość wartość DatePicker na własność naszą stronę za VM eventDate. Co ważniejsze, stworzyliśmy alias do VM elementu niestandardowego DatePicker i nazwaliśmy go eventDateVM. Następnie używamy tego aliasu, aby wyświetlić miesiąc i dzień tygodnia dla daty wybranej w elemencie niestandardowym. Ta wyimaginowana DatePicker ma również właściwość VM, która jest ustawiona na adres url dla obrazu czegoś, co wydarzyło się w wybranym dniu, więc wiążemy ten adres URL do właściwości src znacznika img.

Daj mi znać, jeśli masz więcej pytań na temat tej bardzo ważnej funkcji Aurelia!