Is it possible to add custom "data" attributes using Transparency?

[ZaLiTHkA]

Greetings.. :)

I'm using Transparency to render frames for widgets before I populate them with data, but due to the dynamic nature of the source data, I need to be able to set custom data for some of them to override the page defaults.

Using the template (examples trimmed for brevity):

<div id="widget">
  <section data-bind="widget-container"></section>
</div>

First attempt:

$("#widget").render({}, {
  "widget-container": {
    "data-custom-thing": function() {
      return "my custom data content";
    }
  }
});

Second attempt

$("#widget").render({}, {
  "widget-container": {
    dataCustomThing: function() {
      return "my custom data content";
    }
  }
});

Third attempt

$("#widget").render({}, {
  "widget-container": {
    customThing: function() {
      return "my custom data content";
    }
  }
});

I tried a few other embarrassingly silly things that I wouldn't dare repeat here.... But is what I'm trying to do even possible, or should I just look for anther way to handle this?

[ZaLiTHkA]

hmmm... ok, now I'm very confused. I just tried to replicate this behaviour in Codepen and it is actually working with my first example ("data-custom-thing": function() { ... }). not sure why it wasn't doing this in my own project, but at least now I know this does work with Transparency.

[ZaLiTHkA]

lol. so I just realised what I was doing wrong... basically in my own code I was actually trying to add the custom attribute to the same element I was targeting for the render in the first place.

when I do something like $("#widget").render(), then add my custom attribute to one of it's children (<section data-bind="widget-container">) then it all works beautifully. :) it's so simple that I completely overlooked it..

so, I suppose I should say; thanks for such a simple library! 🖖