vendredi 21 février 2020

Passing values to ember.js components when they are passed as an argument to addin (eg ember-bootstrap-modals-manager)

I have a question about the addon ember-bootstrap-modals-manager but it's possible the issue I'm describing may occur with other Ember addons.

Using ember-bootstrap-modals-manager you can display an alert dialog with a custom body. Here's a screen dump of an example.

enter image description here

To do this you create an Ember component, the template of which contains your custom body markup, for example ...

<p class="alert alert-info">
  Custom Alert Body Component
</p>

... you can then specify that the body of the alert should use that markup by specifying the name of the component when invoking the alert dialog, like this (assuming the component created is called custom-alert-body) ...

showCustomAlertModal() {
    const options = {
      bodyComponent: 'custom-alert-body',
    };
    set(this, 'options', options);
    get(this, 'modalsManager')
      .alert(options);
 }

... that's fine as it stands but if you want to inject values into the component template, for instance like this ...

<p class="alert alert-info">
  Custom Alert Body Component. The alert msg is : 
</p>

... it's not obvious how you can do that because unlike with 'normal' component usage you're not invoking the component in question within a template but just specifying the name in your code .

So my question is (if you're familiar with ember-bootstrap-modals-manager) how can you have a custom body which accepts a value at runtime or (if you're not familiar with it) have you ever seen components used like this in a different context and if so how did they accept a runtime value ?




Aucun commentaire:

Enregistrer un commentaire