如何动态填充javascript函数的选项

Question

I have an application where javascript and html is largely separated. I am trying to write something with javascript or jquery that will pull in all of the data-attributes from an html element and put those into options for a javascript function, Dynamically. There are many options, every time this script is mentioned, not all will be used.

First an example, then ill show how I am doing it (semi-successfully) afterward.

HTML:

<button data-behavior="sweetalert" data-title="Alert Title" data-text="Lorem ipsum dolar..." data-showCancelButton="true">Click Me</button>

Javascript:

sweetAlert({
    title: "Alert Title",
    text: "Lorem ipsum dolar...",
    showCancelButton: true,
});

Straight forward right? Ok, now lets get fancy and populate it dynamcially. So what I want is to be able to find an option in the sweetAlert api and then be able to simply attach it to my html element with a data-attribute . This way front end people can add quick html, without script tags all over the place.

This is what I have done so far that actually does work and gives me the appropriate result, except with options that require non-strings (such as booleans).

$('[data-behavior="sweetalert"]').click(function() {
    attributes = $(this).data();
    delete attributes["behavior"];
    sweetAlert($.each(attributes, function(key, value) {
        key + ": " + value + ', '
    }));
});

So this function works and pulls in the title and the description correctly. However, it does not pull in the boolean options correctly.

Does anyone have any idea on how I can improve this so that I would be able to set boolean options (at the very least) and secondarily integer options?

Surely someone out there has done this type of thing before... Thanks in advance!

Answer 1

The jQuery .data() function automatically converts "true" to true . So this should work:

$('[data-behavior="sweetalert"]').click(function() {
    attributes = $(this).data();
    delete attributes["behavior"];
    sweetAlert(attributes);
});

data() also automatically converts integers, so you should be set on that front as well.

Edit to add comment from OP: data attributes are converted to camel case. So in order for data() to produce an attribute called showCancelButton you should write it as data-show-cancel-button on the element.