¿Se pueden inyectar parámetros desde la plantilla a una acción de widget?

Desarrollador
1

Continuando la discusión desde Guía para desarrolladores de temas de Discourse:

Estimados todos,

Me preguntaba si es posible inyectar parámetros desde la plantilla a una acción, y no pude encontrar una respuesta afirmativa ni negativa en la guía de @Johani. Mi objetivo es generar múltiples widgets desde la plantilla, de modo que la acción de cada uno conozca el parámetro del bucle {{#each}}.

Un ejemplo, tras seleccionar el botón de notificación multiopción de categoría:

<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" ***inyectar_c_de_alguna_manera***)
    }}
{{/each}}
</script>

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

¿Existe alguna forma, dentro de changeCategoryNotificationLevel, de saber en qué categoría me encuentro desde la plantilla?

Si no es así, y si mi problema está descrito correctamente, ¿alguien puede ver otra forma de lograr el mismo resultado?

Gracias de antemano

2

No pude encontrar nada sobre el problema general, pero pude solucionar mi caso con

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

lo que significa, supongo, que quiero mutar el campo c.notification_level con el valor devuelto por el botón.

3

En realidad, mi problema no se pudo solucionar de la manera presentada anteriormente:

  • Sí, el nivel de notificación se modificó, pero…
  • No se guardó. Era necesario hacer clic en otro lugar para guardarlo con otra acción.

Al buscar intensamente palabras clave aleatorias en la base de código de GitHub, pude encontrar una estructura como esta:
{{d-button action=(action "up" wc) ...}}.

Con algunas pruebas, llegué a la conclusión de que funciona de la siguiente manera:

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

Los primeros argumentos arg1, arg2 de los métodos son los proporcionados por la plantilla. Los argumentos restantes argA, argB… pueden ser proporcionados por la especificidad del componente (por ejemplo, el category-notifications-button devolverá un entero dependiendo de la configuración en la que haga clic el usuario).

No estoy absolutamente seguro de que lo que escribo sea correcto, pero puede ayudar a alguien que se haga la misma pregunta que yo.