3 ms·
This is how we do it in our framework, which we started in 2011 and have been using continuously and improving until now: https://qbix.com/platform/guide/tools
by EGreg 3y ago
This is how we do it in our framework, which we started in 2011 and have been using continuously and improving until now: https://qbix.com/platform/guide/tools https://qbix.com/platform/guide/tools
We define "tools" to add/remove behavior to/from existing elements. The tools are added by an HTML5-compliant microformat. For example:
<div class="Q_tool Q_columns_tool">
<form class="Q_tool Q_form_tool">
</form>
</div>
Tools can contain other tools, and you can specify them when you attach event handlers, for example, so the handlers get removed when the tool gets removed, e.g. when its container tool is removed:
event.set(handler, tool); // no need to remove it later
As a more complex example, here we have a chatroom, which has extensions like calling people and mentioning people:
<div class='Q_tool Streams_chat_tool
Streams_mentions_chat tool
Media_call_chat_tool
any_normal_classes_too'
data-streams-chat='{"
publisherId": "abcjwuqk",
"streamName": "..."
}'
data-media-call-chat='{
"livestream": {
"private": true,
"max": 3
}
}'
some-other-attributes="" >
elements may be empty or have some existing content
</div>
And we also support Handlebars helpers:
<ul>
{{#each list}}
<li>{{tool "Streams/chat" publisherId="abc" streamName="..."}}</li>
{{/each}}
</ul>
Finally, we can also activate them dynamically via Javascript:
Q.Tool.prepare(someElement, "Streams/chat", options);
or
div = Q.Tool.prepare('div', "Streams/chat", options);
Then we just call Q.activate(container) which traverses the container and activates all tools inside it. At any point in the console you can type Q.Tool.active and it will show you all active tools.
You can see it in action for example at https://intercoin.app https://intercoin.app
PS: I used to originally call it the "Q" Framework but because of people on HN constantly complaining that it was conflicting with the "excellent Q library for promises", I finally relented and called it "Qbix Platform"... now the Q library for promises is obsolete but we still call it Qbix... so maybe it's better for SEO though? https://news.ycombinator.com/item?id=6053211 https://news.ycombinator.com/item?id=6053211