Aggiunto tasto, dialog e vista del dialog senza azioni associate

[mirko-laruina]

Tasto e dialog sono in un unico componente, non so se e' la strada giusta o se conviene separarli.

[galatolofederico]

Si direi che per ora va bene così. dialog-box può essere visto come un componente che ha come view visibile solo un paper-button che crea il dialog. Magari se volessimo farlo più carino possiamo fare che il corpo del dialog viene passato come child a dialog-box usando il tag <slot> come spiegato qua

Per capirci sto pensando ad una cosa del genere anzichè

<dialog-box></dialog-box>

fare

<dialog-box>
    <h2>Aggiungi memo</h2>
    <p><paper-input></paper-input></p>
    <div class="buttons">
        <paper-button dialog-dismiss>Annulla</paper-button>
        <paper-button dialog-confirm autofocus>Aggiungi</paper-button>                
    </div>
</dialog-box>

e poi si potrebbe wrappare tutto questo in un altro componente specifico tipo dialog-box-todo e mettere questo nel codice principale. Una cosa del genere è più estendibile se volessimo riutilizzare in futuro l'idea di button+dialog.

Intanto faccio il merge delle tue modifiche

[mirko-laruina]

Si, mi sembra sia un approccio molto migliore. Giusto per essere sicuri, il tag <slot> viene sostituito da tutto il contenuto (tutti i child)? Nel nostro caso, se il codice di dialog-box diventasse

            <paper-dialog id="dialog">
                <slot></slot>
            </paper-dialog>

una volta "elaborato" si avrebbe qualcosa del genere:

            <paper-dialog id="dialog">
                <h2>Aggiungi memo</h2>
                <p><paper-input id="new_memo"></paper-input></p>
                <div class="buttons">
                    <paper-button dialog-dismiss>Annulla</paper-button>
                    <paper-button dialog-confirm autofocus>Aggiungi</paper-button>                
                </div>
            </paper-dialog>

C'e' modo di posizione il solo tag <h2> o un altro dei child in maniera separata o in ordine diverso?

In ogni caso, ora sto cercando di aggiungere l'elemento alla lista con il click sulla conferma. Stavo pensando di creare una funzione "privata" di dialog-box che viene richiamata dall' on-click e che, a sua volta, richiami una funzione di todo-list che si occupi di aggiungere l'elemento. Non riesco a capire come richiamare una funzione di un componente diverso, qualche suggerimento? :smile:

[galatolofederico]

Giusto per essere sicuri, il tag viene sostituito da tutto il contenuto (tutti i child)?

Si esatto è come hai detto sotto!

C'e' modo di posizione il solo tag <h2> o un altro dei child in maniera separata o in ordine diverso?

Se ho capito quello che hai in mente forse ti possono fare comodo i "named slot", dai un occhiata qua per vedere come si usano

Stavo pensando di creare una funzione "privata" di dialog-box che viene richiamata dall' on-click e che, a sua volta, richiami una funzione di todo-list che si occupi di aggiungere l'elemento. Non riesco a capire come richiamare una funzione di un componente diverso, qualche suggerimento?

Il fatto è che questo dialog in qualche modo deve modificare la lista dei todo, quindi la cosa più semplice che mi viene in mente sarebbe di spostare la variabile di modello con la lista dei todo nel codice principale e di passarla in 2-way binding a todo-list. Fatto questo passerei la stessa lista sempre in 2-way binding anche al componente che si occupa di creare il dialog in modo da poterla modificare sull'on-click. Anche se forse potrebbe essere interessante astrarre questo concetto di dialog e far lanciare al componente con il dialog un custom event alla pressione del tasto conferma ed intercettare il custom event nel controller dell'app e modificare da lì la lista.

Tutte e due le strade vanno bene, segui quella con cui ti trovi meglio!

[mirko-laruina]

Ho implementato il 2-way binding "globale", che mi sembra meno elegante perche' devo propagare la modifica dell'array per diversi componenti. Ora faccio PR.