come usare la funzione ref.view-model

Question

Sto vedendo questa caratteristica nei documenti, ma non riesco a capire come usarlo da quelle informazioni.

Dice: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> Che aspetto ha questo nel mondo reale?

Answer 1

Questa sintassi è effettivamente cambiata per essere più coerente con il resto della sintassi di collegamento di Aurelia nella nostra ultima versione (che ha colpito dopo aver postato questa domanda).

La sintassi è ora:

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

Ma comunque, view-model.ref="producer" crea un alias alla vista modello per l'elemento i-produce-a-value personalizzato che è quindi possibile utilizzare altrove per passare a un altro elemento personalizzato o utilizzare le proprietà del VM. Quindi nella seconda riga del codice sopra, i-consume-a-value ha una proprietà denominata input che è stata associata alla proprietà output della VM dell'elemento i-produce-a-value.

Diamo un'occhiata a un esempio. Supponi di avere un elemento personalizzato DatePicker. Il suo modello di visualizzazione ha diverse proprietà come dayOfWeek e month. Vorresti utilizzare le proprietà in altri elementi sulla tua vista. È possibile associare una proprietà alla VM di View a ciascuna di queste proprietà e quindi associare le proprietà della vista in un'altra posizione nella visualizzazione in cui si desidera utilizzare questi valori oppure è possibile utilizzare lo view-model.ref per consentire il collegamento diretto a questi valori sul proprio DatePicker elemento personalizzato. Qualcosa di simile a questo:

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

Quindi, in questo esempio, abbiamo legato la proprietà valore del DatePicker al eventDate proprietà di VM della nostra pagina. Ancora più importante, abbiamo creato un alias per la VM dell'elemento personalizzato DatePicker e lo abbiamo chiamato eventDateVM. Quindi usiamo questo alias per visualizzare il mese e il giorno della settimana per la data selezionata nell'elemento personalizzato. Questo immaginario DatePicker dispone anche di una proprietà VM impostata sull'url per un'immagine di qualcosa che è accaduto nella data scelta, quindi associamo l'url alla proprietà src di un tag img.

Fatemi sapere se avete altre domande su questa caratteristica molto potente di Aurelia!