Data attributes for mockup patterns

Plone Support Add-on Development
1

I have implemented a pattern into my site for tablesorter, mostly using this example here https://plone-training.readthedocs.io/en/latest/javascript/exercises/8.html. It works but I want to be able to pass some parameters when initializing it. It seems like mockup patterns have some kind of magic to read an attribute on the pattern'd element of name "data-pat-$PATTERNNAME" I think?

Basically I want to be able to do something like this to have it sort on the first column, alphabetically descending:

<table class="listing pat-tablesorter"
                           summary="Content listing"
                           i18n:attributes="summary summary_content_listing;"
                           data-pat-tablesorter="{sortList: [[0,0]]}">

That doesn't do anything. Now I could change "that.$el.tablesorter()" to "that.$el.tablesorter({sortList: [[0,0]]});" and that does work, but I don't want this to be in the pattern itself, I want it passed as a data parameter. So I could add some javascript to explicitly fetch the data-pat-tablesorter value and put it in here, but reading over other patterns I get the impression there is a better way to do this?

2

I think I found the bulk of the answer I was looking for - you can get this as "this.options". However, I couldn't get it to work with "{sortList: [[0,0]]}" (as a dict) but instead had to pass it as simply "sortList:[[0,0]]" and then further have it parse the value as JSON. So the following works but probably could still be done much better

init: function () {
        var that = this;
        that.$el.tablesorter({sortList: JSON.parse(that.options.sortList)});
}