Jtml

Last Updated: 2023-10-27 20:35:19
The jQuery UI datepicker control has many parameters, for simplicity, lets implement it using only the changeMonth and
changeYear parameters. Your HTML code will look something like this.

<div jtml-changeMonth="true" jtml-changeYear="true"></div>

When the library loads, it will convert the Jtml definition into an instance of a jQuery datepicker class.

Jtml can also be extended to wrap other libraries such as the above jQuery UI implementation. Below is an example of
how you can create a Jtml extension.

var Jtml = (function ( mj, $ ) {
    return mj;
}( Jtml || {}, jQuery ) );


The Jtml library is passed to the extension as mj along with a library object, in this case, it's jQuery.  Implementation
of controls are added to the mj object through functions.  Each function accepts two parameters, the Dom element bound
to Jtml and a json object representing Jtml variables.  The function will look like this.   

var Jtml = (function ( mj, $ ) {
    mj['jq-datepicker'] = function ( element, attrs ) {
        let params = mj.translate( attrs ) || {};
        $ && $.isFunction( $.fn.datepicker ) && $(element).datepicker( params );
    };
    
    return mj;
}( Jtml || {}, jQuery ) );


This example is simple but extensions can be much more advanced by incorporating events and code blocks. It's best
practice not to exceed what the library is intended for.  For example, if you are implementing callbacks through
Jtml attributes then it's probably a better idea to create your own control or library.

Was this page helpful?