Jquery-mtemplatejs NPM

jQuery - MTemplateJS

A template plugin for jQuery. Allows templating without dirtying the JavaScript code with HTML markup. Fast and simple. A lot of attributes supported in only 3.5 KB (minified).

Include

<script type="text/javascript" src="dist/jquery-mtemplatejs.min.js"></script>

Template:

<script id="..." type="text/html">
    ...
</script>

Template attributes:

data-mt-text
data-mt-class
data-mt-href
data-mt-src
data-mt-alt
data-mt-data
data-mt-title
data-mt-func

Container

<div data-mt-use="..."></div>

Fully example

<div id="content" data-mt-use="template"></div>

<script id="template" type="text/html">
    <div>
        <span data-mt-text="name"></span>
        <span data-mt-class="css_class"></span>
        <a data-mt-href="home_page" data-mt-title="link_title">Link</a>
        <img data-mt-src="logo" src="" data-mt-alt="logo_alternative_text"/>
        <span data-mt-func="hello"></span>
    </div>
</script>

You can also use more than one template attribute in the same tag.

$("#content").mtemplatejs(data, config);

Where data could be:

[
    {
        "name": "Mark Zucca",
        "css_class": "hidden",
        "home_page": "http://www.google.it",
        "logo": "http://www.google.it/logo.gif",
        "logo_alternative_text": "The logo of the company",
        "link_title": "Click to follow the link"
    },
    {
        "name": "Bill Gabbie",
        "css_class": "visible",
        "home_page": "http://www.yahoo.it",
        "logo": "http://www.yahoo.it/logo.gif",
        "logo_alternative_text": "The logo of the company",
        "link_title": "Click to follow the link"
    },
    ...
]

and config could be:

{
    directives: {
        'hello': function ($item, record) {
            $item.text("Hello world!");
        }
    },
    effect: 'fade',
    effectDuration: 1000
}

Effects

The only effect supported when it is appending an item is fade.

Sub-template

The support for the sub-template is guaranteed by the tag data-mt-data.

Hook

There are some hooks which could be customized:

beforeExecution: run before the execution of the library
afterExecution: run after the execution of the library
beforeAppendItem: run before append a new item
afterAppendItem: run after append a new item

Example:

$("#content").mtemplatejs(data, directives,
    beforeExecution: function () {
        console.log("before execution");
    },
    afterExecution: function () {
        console.log("after execution");
    },
    beforeAppendItem: function ($element) {
        console.log("before append item: " + $element);
    },
    afterAppendItem: function ($element) {
        console.log("after append item: " + $element);
    }
});

See the hook test

jQuery - MIncludeJS

Simple and stupid way to include a portion of html from another file or inline. To include the file you can use the same attributes of MTemplateJS. It supports also the hooks.

Example

[...]
<body>

<script type="text/javascript">
    $(function () {
        $("#content").mincludejs({
            beforeExecution: function () {
                console.log("before execution");
            },
            afterExecution: function () {
                console.log("after execution");
            },
            beforeAppendItem: function ($element) {
                console.log("before append item: " + $element);
            },
            afterAppendItem: function ($element) {
                console.log("after append item: " + $element);
            }
        });
    });

</script>

<h1>Include</h1>
<div id="content" data-mt-use="template"></div>

<script id="template" type="text/html">

    <div class="data_container">
        This is the content!
    </div>

</script>

</body>
[...]