jQuery Template...

Various test with jQuery Template plugin + JsFiddle Ajax Widget

by certainlyakey

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<!--// Example 1 //-->

<ul id="movieList1"></ul>
<hr />

<!--// Example 2 //-->

<div id="movieList2"></div>
<hr />

<!--// Example 3 //-->

<div>
    <h3><a href="http://jsfiddle.net/user/molokoloco/fiddles/" class="rsswidget" target="_blank"><img height="14" width="14" alt="RSS" src="http://www.b2bweb.fr/wp-includes/images/jsfiddle.jpg" style="border:0"></a> <a title="jsFiddle - Online Editor for the Web (JavaScript, HTML, CSS)" href="http://jsfiddle.net/user/molokoloco/fiddles/" target="_blank">Molokoloco's JS fiddles</a></h3>
    <ul id="fiddlesList">
    </ul>
</div>

<hr />

<a href="http://api.jquery.com/jquery.tmpl" target="_blank">http://api.jquery.com/jquery.tmpl</a> | <a href="http://api.jquery.com/tmplitem/" target="_blank">http://api.jquery.com/tmplitem/</a> | <a href="http://api.jquery.com/template/" target="_blank">http://api.jquery.com/template/</a><br />
<a href="https://github.com/jquery/jquery-tmpl" target="_blank">https://github.com/jquery/jquery-tmpl/</a><br />

CSS

* { font:12px/14px Tahoma; }

JavaScript

// global custom filter for field
function getMovieName() {
    return this.data.Name.toUpperCase();
}

$(function() {
    
    // ----------- Example 1----------- //
    
    var movies = [
        { Name: "The Red Violin",ReleaseYear: "1998"},
        { Name: "Eyes Wide Shut", ReleaseYear: "1999"},
        { Name: "The Inheritance", ReleaseYear: "1976"}
    ];

    $.template('movieTemplate', '<li><b>${getMovieName()}</b> - ${ReleaseYear}</li>');
    $.tmpl('movieTemplate', movies)
        .appendTo('ul#movieList1')
        .click(function() {
            var item = $.tmplItem(this); // Fetch item associated data
            alert(item.data.Name + ' // ' + item.nodes);
        });
    
    // ----------- Example 2 ----------- //
    
    // Other test, but fail.... Get TPL html string without APPEND 
    // http://stackoverflow.com/questions/4851086/how-to-output-html-with-jquery-without-appending-to-element/5435222#5435222
    $.template('navTpl', '<ul>{{html li}}</ul>');
    $.template('navItemTpl', '<li>${Name}</li>');
    var navItemTplHtml = $.tmpl('navItemTpl', movies);
    var navTplValue = {li: navItemTplHtml.html()}; // FAIL ?
    $.tmpl('navTpl', navTplValue).appendTo('div#movieList2');
    
});

// ----------- Example  3 ----------- //

function getDateTo() {
    this.data.created = this.data.created.split(' '); // "2011-02-16 02:02:11"
    this.data.created = this.data.created[0].split('-');
    return  this.data.created[2]+'/'+this.data.created[1]+'/'+this.data.created[0];
}

jQuery(function() {
    $.ajax({
        dataType: 'jsonp',
        url: 'http://jsfiddle.net/api/user/molokoloco/demo/list.json',
        data: {sort:'date', start:0, limit:10},
        success: function (data) {
            if (!data || !data.list) {
                $('div.widget_fiddle').remove();
                return;
            }
            $.template('fiddleTpl', '<li><a title="${description}" href="${url}" target="_blank">${title}</a>...