Created
May 27, 2011 11:11
-
-
Save brenes/995050 to your computer and use it in GitHub Desktop.
Tiny JQuery extension to render json over an element using Tempo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
(function($) { | |
$.fn.render_json = function (url, data_to_send) { | |
$.ajax({url: url, dataType: 'json', data: data_to_send, context: $(this), | |
success: function(data_received){ | |
if(data_received.length > 0) | |
{ | |
$(this).each(function () { | |
Tempo.prepare(this.id).render(data_received); | |
}); | |
} | |
}}); | |
} | |
})( jQuery ); | |
}); | |
/********************************************************** | |
WHAT: | |
This extension just queries the url parameter and loads the repsonse as JSON. Then, if there's data it uses tempo to render it over all the elements | |
HOW TO USE IT: | |
- HTML: Just a regular template from Tempo | |
<div id="container"> | |
<ul id="container-list"> | |
<li data-template> | |
<a href="{{path}}">{{name}}</a> | |
</li> | |
<li data-template-fallback>Sorry, JavaScript required!</li> | |
</ul> | |
</div> | |
<script src="json_render.js" type="text/javascript"></script> | |
<script src="tempo.js" type="text/javascript"></script> | |
- JS: We call the function over some element | |
$("#container").render_json("URL", []) | |
- SERVER: We need some server script which returns JSON. The response must follow the format required by tempo. | |
*******************************************************************/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment