Passing parameters via onclick to HandlebarsJS partial

Question

I have a few <div> tags that trigger a modal. The modal is a partial included on the page. I want to change the text inside the modal depending on the <div> that was clicked. I can't figure out how to pass a variable to the partial when the <div> is clicked. Any ideas?

<div data-open="config">
    <a href="">link 1</a>
</div>
<div data-open="config">
    <a href="">link 2</a>
</div>
{{> My_modal}}

Answer 1

Please refer to the API documentation of the open event handler.

You could place here a function that do all the job you need when the dialog is open.

But you have to find a way to get your clicked element, as the provided event is just something from jquery dialog.

You could do by set some css class on selected element on click handler.

And then you get it in other functions when you need.

But you can do the job in the place where you open the dialog.

In this function you have access to the clicked element and could get the text easy.

And then just compile your handlebars template with your infos.

Have a look at this jsfiddle example .

Just close the dialog and then click on one of the links, you see the text inside the dialog change based on link selected.