Template dynamism

[mupersega]

Hi fellows,

Has anyone implemented a component-like system which allows for more complex interactions between templates and their children/parents.

What I'm looking for is some way of passing bindings, classes, attributes or functions from a parent container to template much like you would in some JS frameworks via props or attributes on the component. For example I have a button template into which I can pass the text of the button but what I really want is the ability to pass a function to be used on click of the inner button.

The code for which might look like
parent

child/template

Does this exist or do you have ideas on how I might implement it, perhaps via a script tag inside the template itself?

EDITS: I have noticed though that templates don't seem to be able to be used like this. That the content of the second button template actually gets appended to that of the first. My guess is that it uses the template ID as the identifier to add to and since both buttons have the same id for content then it gets added to the first one it comes across.

Cheers.

[mikke89]

Hey!

Yeah, one can't really refer to element attributes from data expressions, so it won't work like this. Also, you'll have to use the data-binding attribute, which would be e.g. data-event-click="my_click_function()".

You have some options. You can define a data alias and refer to that in the template. That way you can make it re-usable. But this way you can only refer to data-variables that are defined elsewhere, you can't really define it directly in the parent.

Another option is to make a data event callback. That way you can handle the event manually, and read the attribute from the current element, and make your action based on what's given in your "clickFunction" attribute. See an example of such a handler in the documentation. You can fetch the current element from the event in that callback, and read what you want from it.

Let me know how it goes.

[mikke89]

Glad to hear that! Don't worry about asking questions, I'll get to them when I can :)

I didn't know about starting-style, that's interesting. I haven't really ever felt the need for something like this. I have usually set the initial properties for the hidden state (with 0 opacity and such). Then after loading it (before rendering), I set the a class for the visible state. That should make the transition activate.

We also have a show event, so maybe you can hook into that; https://mikke89.github.io/RmlUiDoc/pages/rml/events.html. I'm not sure exactly how the ordering would apply. Just remember that you'll have to do a new context update after making CSS changes, before rendering the context.

By the way, for chats we have gitter: https://gitter.im/RmlUi/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge

[mupersega]

@mikke89 What event are you listening for to get this behaviour, specifically the load?

I have usually set the initial properties for the hidden state (with 0 opacity and such). Then after loading it (before rendering), I set the a class for the visible state.

The issue with this for me is that an element even with opacity:0 still occupies space in the dom. I'd be happy to use .loaded classes to describe the finishing state of those elements that I want to transition, but it has to be some combination of:

1. data-if triggering the display change, and
2. an event that I can listen for to then add the loaded class.

manifesting in something like


Where notifyLoad(me) just adds the loaded class.

Am I misunderstanding the load event or is it that the load event isn't actually available in template?

[mikke89]

I'm not sure I fully understand the problem. Doesn't the data-if take care of the display value, so it doesn't take any space in the layout?

The load event is only for the body, it doesn't really interact with templates in any way. To be honest, I have never really found it useful myself. There is no such thing as an "element being ready in the DOM" for us, when you add an element or load a document, it is right there immediately.

Another thing that may or may not be helpful in your case is the transitionend event, just so you know that this exists.

[mikke89]

Just FYI, inspired by this conversation, I just modified the animation of the display keyword slightly, see: 914dac4

I think this can be helpful in many cases when animating or transitioning to or from display: none. This now works the same as the visibility property did previously, by always using the visible value throughout the interpolation.

[mupersega]

Wonderful, fingers crossed we can get all this loveliness into BAR. I have been working on a style guide for BAR so that new devs can get up to speed and start iterating fast while also being coherent. Its a blend of theme utility classes and groups of said classes in its most generalised explanation, hasn't released yet to our main branch because I'm still fleshing out the common class groups not to mention it all needs to be reviewed and even allowed in haha.

Devs can also copy traight to IDE with

Very grateful for your work, keep it up.