So verwenden Sie die Ref.view-Modell-Funktion

Question

Ich sehe diese Funktion in der Dokumentation, aber ich kann nicht genau herausfinden, wie ich sie aus diesen Informationen heraus verwenden kann.

Es heißt: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> Wie sieht das in der realen Welt aussehen?

Answer 1

Diese Syntax hat sich geändert, um konsistenter zu sein mit der restlichen Bindesyntax von Aurelia in unserer neuesten Version (die nach dem Stellen dieser Frage ausgelöst wurde).

Die Syntax ist jetzt:

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

Aber irgendwie schafft view-model.ref="producer" einen Alias ​​zu der Ansicht-Modell für das i-produce-a-value benutzerdefinierte Element, das Sie dann an anderer Stelle auf eine andere benutzerdefinierte Element oder Gebrauchseigenschaften des passieren können VM. In der zweiten Zeile des obigen Codes hat eine Eigenschaft namens input, die an die output Eigenschaft der VM des Elements i-produce-a-value gebunden ist.

Schauen wir uns ein Beispiel an. Angenommen, Sie haben ein DatePicker benutzerdefiniertes Element. Sein Ansichtsmodell hat verschiedene Eigenschaften wie dayOfWeek und month. Sie möchten die Eigenschaften in anderen Elementen Ihrer Sicht verwenden. Sie könnten eine Eigenschaft auf der VM Ihrer View an jede dieser Eigenschaften binden und dann an die Positionen Ihrer Ansicht an anderer Stelle in Ihrer Ansicht binden, wo Sie diese Werte verwenden möchten, oder Sie können view-model.ref verwenden, um direkt an diese Werte zu binden DatePicker benutzerdefiniertes Element. Etwas wie folgt aus:

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

So, in diesem Beispiel haben wir den Wert Eigenschaft des DatePicker zum eventDate Eigentum unserer Seite VM gebunden. Was noch wichtiger ist: Wir haben einen Alias ​​für die VM des benutzerdefinierten Elements DatePicker erstellt und ihn eventDateVM genannt. Anschließend verwenden wir diesen Alias, um den Monat und den Wochentag für das im benutzerdefinierten Element ausgewählte Datum anzuzeigen. Diese imaginäre DatePicker hat auch eine VM-Eigenschaft, die auf die URL für ein Bild von etwas festgelegt ist, das am ausgewählten Datum passierte, also binden wir diese URL an die src-Eigenschaft eines img-Tags.

Lassen Sie mich wissen, wenn Sie weitere Fragen zu dieser sehr leistungsfähigen Funktion von Aurelia haben!