È possibile iniettare parametri dal template a un'azione del widget?

Sviluppatore
1

Continuando la discussione da Guida per sviluppatori ai temi di Discourse:

Cari tutti,

Mi chiedevo se fosse possibile iniettare parametri dal template a un’azione, ma non ho trovato una risposta né positiva né negativa nella guida di @Johani. Il mio obiettivo è generare più widget tramite il template, in modo che l’azione di ciascuno conosca il parametro del ciclo {{#each}}.

Un esempio, dopo aver selezionato il pulsante multiscelta per le notifiche della categoria:

<script type="text/x-handlebars" data-template-name="components/some_component">
{{#each categories as |c|}}
    {{category-notifications-button
        value=c.notification_level
        category=c
        onChange=(action "changeCategoryNotificationLevel" ***iniettare_c_in_qualche_modo_as_parametro***)
    }}
{{/each}}
</script>

<script type="text/discourse-plugin" version="0.8">
  api.modifyClass("controller:some_component", {
    actions: {
      changeCategoryNotificationLevel(selected_value, ***c_as_parametro***) {
        c_as_parametro.setNotification(notificationLevel);
      }
    }
  }
});
</script>

Esiste un modo, all’interno di changeCategoryNotificationLevel, per sapere da quale categoria si proviene nel template?

Se non è possibile, e se il mio problema è descritto in modo sufficiente, qualcuno vede un altro modo per ottenere lo stesso risultato?

Grazie in anticipo

2

Non sono riuscito a trovare nulla riguardo al problema generale, ma ho risolto il mio con questo hack:

{{#each categories as |c|}}
    {{category-notifications-button
        ...
        onChange=(action (mut c.notification_level))
    }}
{{/each}}

Il che significa, immagino, che voglio mutare il campo c.notification_level con il valore restituito dal pulsante.

3

In realtà, il mio problema non poteva essere risolto nel modo presentato sopra:

  • sì, il livello di notifica è stato modificato, ma…
  • non è stato salvato. Bisognava cliccare altrove per salvarlo con un’altra azione.

Cercando intensamente parole chiave casuali nel database del codice di GitHub, sono riuscito a trovare una struttura simile a questa:
{{d-button action=(action "up" wc) ...}}.

Con alcuni test, sono arrivato alla conclusione che funziona in questo modo:

  • template:
    {{d-button action=(action "nomeDellAzione" arg1 arg2) ...}}
  • JS:
    api.modifyClass("component:some-component", {
    actions: {
        nomeDellAzione(arg1, arg2, argA, argB) {
            console.log(arg1);
            console.log(arg2);
            console.log(argA);
            console.log(argB);
        }
    }
})

I primi argomenti arg1, arg2 dei metodi sono quelli forniti dal template. Gli argomenti rimanenti argA, argB… possono essere forniti dalle specificità del componente (ad esempio, il category-notifications-button restituirà un intero a seconda dell’impostazione su cui l’utente clicca).

Non sono assolutamente sicuro che quanto scritto sia corretto, ma potrebbe aiutare qualcuno che si pone la stessa domanda che mi sono posto io.