jQote API reference
PLEASE NOTE:
jQote2 has been released. Please consider upgrading now!!! Click here for a quick summary of what’s new and what’s changed.
jQote allows you to operate on a single template as well as a collection of templates. Any template you call jQote upon will get converted using the data object you provide.
Note: Since objects are passed by reference you may easily alter the data object inside a template and have these changes carried over to the next iteration.
To make your life easier you may just as well pass an array of data objects to jQote to have your template(s) iterate over every data object provided, thus inducing n x m conversions.
$.jqote_tag(tag) : method
This may be used to change the default start- and ending tag character from % to anything you want to. Be aware that changing the tag’s char(s) this way every successive call to jQote expects the templates to be compliant to the newly set default.
Returns
void
Parameters
tag : String
$().jqote(data[, tag]) : function
Inside your templates you may use the this keyword to reference the data object’s properties. Additionally two counting variables i and j are defined (the former iterating over your templates, the latter iterating over your data objects).
You may use the optional second paramter to temporarily specify different start- and ending tag char(s). The change will overwrite the default tag char(s) just for the single call!
Returns
jQuery : object
Parameters
data : object | array of object
tag : String (optional)
Example
The infamous and obligatory “Hello World” …
Notice that this temporarily uses a different start- and ending tag char (the * star)!!!
<p id="greet"></p>
<script type="text/html" id="tmpl">
<![CDATA[
I said <strong><*= this.what *></strong> !!!
]]>
</script>
<script type="text/javascript">
// let's do some jQote magic
$('#tmpl').jQuote({what: 'Hello World'}, '*').appendTo($('#greet'));
</script>
I said Hello World !!!
Example
This example will list some names of european capitals …
<ul id="capitals"><ul> <!-- let's define our city template --> <script type="text/html" id="city_tmpl"> <![CDATA[ <li class="city"> <%= this.name %> <% if ( this.info ) { %> <ul class="info"> <% for ( key in this.info) %> <li><%= key + ': ' + this.info[key] %></li> <% ; %> </ul> <% } %> </li> ]]> </script>
<script type="text/javascript">
var cities = [{
name: 'Paris',
info: { language: 'french', sight: 'tour Eiffel' }
}, {
name: 'Berlin',
info: { language: 'german', sight: 'Brandenburger Tor' }
}];
// let's do some jQote magic
$('#city_tmpl').jQuote(cities).appendTo($('#capitals'));
</script>
- Paris
- language: french
- sight: tour Eiffel
- Berlin
- language: german
- sight: Brandenburger Tor
comments
20 Responses to “jQote API reference”
Leave a Reply
I had to turn off caching since – to some extend – the wrong templates would be loaded.
( fn = cache[$.data(this, 'jqote')] && false)
Edit by admin: translated the original post
@hhh
Thanks alot.
You just found a bug that would prevent the cache from using the right buckets to store the precompiled templates.
I’ve updatet the source and the minified version, so you should be save to reenable the cache.
Cheers.
Hey,
I really like your plugin, but I have some questions about the functionality. First it was not working, but after fixing that problem I am fully using it.
I see that you are using a for each iteration in th api, but I was asking myself whether or not it is possible to use for and while iterations?
Because when I try the following code:
I only see one star because it finds one item with score in it, but it should show more stars… if you see what I mean.
Does anyone know how to accomplish this?
I had problems with templates that may return blank data. like the one below..
fixed this by changing..
.split("'").join("\\'") .split("\x1a").join("'") + "'); return t.join('');" ); var res; for ( j=0; j < data.length; j++ ) { res = f.call(data[j], i, j); if(res) dom.push($(res)); }@ Lode Schoors
Glad you like the plugin (keep in mind that it’s mainly Resig’s work, though).
Somehow you’re code example got mangled, so I can’t really help you on that. But be asured that it is possible and quite easy to use for and while loops.
Consider this example:
var star_rating = { rating: function() { // return integer from ajax call } } $('#template').jqote(star_rating).appendTo($('body'));<script type="text/html" id="template"> <div class="stars"> <% var n = this.rating(); for (i=0; i < n; i++) { %> <img src="star.jpg" class="star_img"/> <% } %> </div> </script>Hope that'll clearify things for you.
bye
@z33m
Good point, dude.
Haven’t thought about templates returning nothing. I’ll address this issue with the next overhaul.
Thanks.
How do you get the transformed string?
For example, for the below code, I would like to print the transformed
string to the console.
var out = $(‘#tmpl’).jqote({what: ‘Hello World’})
console.log(“out: “+ out);
I second @David’s request – I need a way to get the transformed string. This will be useful to pass into a function of a third party library that accepts an HTML strings.
@aefxx: I was sort of expecting the dom elements resulting from processing the template to be selected by the returned jQuery object, so that I could do (for example) .find(‘.someclass’) on the returned object. This doesn’t seem to be the case — the returned jquery object instead selects jquery objects, which seems a little odd. http://pastie.org/801263 selects the elements instead. Thoughts?
@Paul
Thank you for your comment. I agree with you that jQote should return a selection the way we all would expect it to be.
Well, good news. As I overhauled the conversion part I fixed your issue as well.
jQote now correctly returns a valid jQuery object (with DOM elements as members).
And on top of that, with the release of 1.4. the performance got a nice boost.
This looks very neat but sadly doesn’t seem to work in Safari 4.0.4.
Console reports: Syntax error, unrecognized expression: >
Any idea for a way to get around that?
I’m having trouble with an if nested inside a for loop.
<img src='’ />
by
This works perfectly for all the data, iterating over a set of this.line_items. EXCEPT the nested if statement fails for the first element in the set of this.line_items. The data is valid (checked with Jlint), and the behavior is exactly correct for every element after the first line_item. Any ideas?
@SadUser
I am currently working on jQote2 that will be compatible with all the major browsers. jQote2 will get released very soon. Bear with me.
@Andrew
Could you provide some more code of yours?
Hi there!,
thinking of using this right now for a mjor site, when will jquote2 be released?
lol javascript ninja!…. checkout the flash super samurai book i did once in a new moon – seems the japanese theme is well liked in our nerdy minds.
(you can delete this comment, just wanted to shout out)
Edit by aefxx
You must have seen Ghost Dog: The Way of the Samurai once too often , Klaus San.
@klh
Happy to see you considering jQote for production use.
Well, the work on jQote2 is almost done – it’ll be released around March 6th or 7th.
As jQote2 now breaks compatibility with its predecessor I’ll have to add a legacy switch to support the existing code.
Since then.
No need for my code–I figured out my problem, probably ended up being a not closed curly brace or something dumb. :-)
Great news about jQote2, I’ll be glad to use it, especially if it supports Safari 4 too. I’ll check back in a couple days!
// let’s do some jQote magic
$(‘#tmpl’).jQuote({what: ‘Hello World’}, ‘*’).appendTo($(‘#greet’));
the example caused some problems
It’s called ‘jqote ‘now , not jQuote
jqote.benchmark.htm from http://github.com/aefxx/jQote2 – actually, Flot, used there, has small compatibility issue with IE – it crashes after test with error:
‘window.G_vmlCanvasManager’ is null or not an object
(see. http://code.google.com/p/flot/issues/detail?id=116 for details)
I downloaded excanvas.js from http://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip&can=2&q=, save it to “external” folder, and added to head as first line :
and script run OK
<irony>I would love to use this, but only as long as incompatibility with Safari 4 is maintained.</irony>