Associazione dati bidirezionale in elementi personalizzati Aurelia: collegamento di elementi personalizzati alla finestra principale del modello

Question

Nella mia applicazione ho realizzato molti "servizi" che posso iniettare nei miei modelli viewmodels per risparmiare som ridondanza e tempo.

Ora sto cercando di fare un ulteriore passo avanti, e rendere quegli elementi del modulo (selezionare, testo, caselle di controllo - un menu a discesa di selezione per gli avviatori) e trasformarli in elementi personalizzati, inserendo il servizio solo nell'elemento personalizzato.

Posso farlo funzionare in una certa misura. L'elemento personalizzato (selezionare in questo caso) viene mostrato quando lo richiedo nella vista "genitore", tuttavia quando cambio il valore selezionato dell'elemento di selezione personalizzato, non si associa al viewmodel "genitore", che è il mio requisito .

Desidero essere in grado di associare il mio valore selezionato dall'elemento personalizzato a una proprietà sul viewmodel "principale" tramite l'attributo di bind nel suo modello.

aggiornerò quale frammento di codice in pochi minuti.

create.js (quello che mi riferisco a come viewmodel genitore)

import {bindable} from 'aurelia-framework'; 
export class Create{ 
    heading = 'Create'; 
    @bindable myCustomElementValue = 'initial value'; 
} 

create.html (vista padre)

<template> 
    <require from="shared/my-custom-element"></require> 
    <my-custom selectedValue.bind="myCustomElementValue"></my-custom> 
    <p>The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes</p> 
</template> 

my-Custom.js

import { inject, bindable} from 'aurelia-framework'; 
import MyService from 'my-service'; 

@inject(MyService) 
export class MyCustomCustomElement { 
    @bindable selectedValue; 

    constructor(myService) { 
     this.myService = myService ; 
    } 

    selectedValueChanged(value) { 
     alert(value); 
     this.selectedValue = value; 
    } 

    async attached() { 
     this.allSelectableValues = await this.myService.getAllValues(); 
    } 
} 

Cosa succede inizialmente la vista create.html restituisce "valore iniziale", e mentre cambio il valore dell'elemento personalizzato select, il valore appena selezionato Viene avvisato, ma non aggiorna la variabile genitore legata, che sta ancora mostrando semplicemente "valore iniziale".

Answer 1

ci sono un paio di questioni qui:

1. Hai bisogno di kebab e minuscole tutti i nomi di proprietà in DOM causa di caso-insensibilità

   selected-value.bind="property"

   non

   selectedValue.bind="property"

2. È necessario eseguire il bind a due vie. Quando si crea un @bindable utilizzando il decoratore, uno degli argomenti è BindingMode che si utilizza per impostare la modalità di associazione predefinita.

   Aurelia imposta alcuni valori predefiniti sensibili, ad es. il valore predefinito per input value.bind=".." è a due vie senza essere esplicito

   Se non si desidera impostare una modalità di legame di default, si può solo essere esplicito con la rilegatura:

   selected-value.two-way="prop"

Spero che questo aiuta :)

Edit: Penso che l'API è cambiato un po 'dopo questa risposta.

Il @bindable decoratore ha il seguente ordine a:

bindable({ 
    name:'myProperty', 
    attribute:'my-property', 
    changeHandler:'myPropertyChanged', 
    defaultBindingMode: bindingMode.oneWay, 
    defaultValue: undefined 
}) 

Uno dei migliori posti da controllare per un rapido riferimento è l'Aurelia cheat-sheet nella documentazione:

http://aurelia.io/docs/fundamentals/cheat-sheet