-
New Feature
-
Resolution: Done
-
Normal
-
None
-
None
-
None
As title.
When using other frameworks (ex. vue.js), using the custom tags/attributes in ZK components causes a parsing error:
For example,
<zk xmlns:n="native"> <n:button v-on:click="xxx">Sign In</n:button> </zk>
Requirement
zul can support custom prefix on a native element and a zul element and render the prefix to DOM elements
Usage example
<zk xmlns:v-on="http://www.zkoss.org/2020/zk/client/attribute-prefix" xmlns:q-on="client/attribute-prefix" xmlns:n="native" xmlns:ca="client/attribute"> <!- zul element use case: -> <a onClick="" hflex="" ca:bbb="" v-on:ddd="" q-on:click="" /> <!- native element use case: -> <n:button v-on:click="xxx">Sign In</n:button>
Solution Evaluation
1. [New feature] a new namespace
ZK should support a new namespace that outputs raw attributes including namespaces e.g. http://www.zkoss.org/2020/zk/client/raw-attribute
<zk xmlns:v-on="http://www.zkoss.org/2020/zk/client/attribute-prefix" xmlns:q-on="client/attribute-prefix" xmlns:w="client" xmlns:ca="client/attribute"> <a v-on:ddd="" q-on:click="" onClick="" hflex="" ca:bbb="" /> <n:button v-on:click="xxx">Sign In</n:button>
Pro
- ZK can render such custom prefix to DOM element
Con
- add one more namespace to the existing 9 namespaces might cause confusing
Reason
In out current Client attribute namespace, ZK doesn't render the prefix v-on to a DOM element.
<zk xmlns:v-on="http://www.zkoss.org/2005/zk/client/attribute"> <button v-on:click="abc"/>
2. HTML component
<html ><![CDATA[ <button v-on:click="xxx">sign in</button> ]]></html>
Con
- HTML elements are enclosed by <span class="z-html">
- no syntax highlight for HTML
- zul element does't support
3. pure HTML + embedded ZK
in html
<button v-on:click="abc"/> <div id="embedded" /> <script src="/.../zkau/web/js/zkmax/embedded/embedded.js"></script> <script> zEmbedded.load('embedded', 'xxx.zul'); // use client binding </script>
Pro
- just like using a front-end framework
Con
- use the embedded mechanism to communicate (Client - ZK)
4. include an HTML
a zul includes an HTML that contains a custom attribute element
Summary
Allowing various foreign client frameworks syntax written in a ZUL will make ZUL itself more and more complicated. We suggest keeping things simple for maintenance and user learning.
Hence, suggest using "include an HTML" or "embed a zul" to handle such integration.