borismoore / jquery-tmpl Goto Github PK

I'm confused about where to post issues for jquery-tmpl, so I'm cross-posting this issue: https://github.com/nje/jquery-tmpl/issues/32

I have mofified the example of "Example: Using {{tmpl}} to render hierarchical data." in http://api.jquery.com/template-tag-tmpl/ to highlight the issue:

test.html



<style>
table {float:left;clear:right;border-collapse:collapse;width:370px;background-color:#f8f8f8;margin:4px;} table td {border:1px solid blue;padding:3px;}
table th {font-weight:bold;border:2px solid blue;padding:1px;} table tbody {border:2px solid blue;} button {float:left;margin:4px;width:70px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="test.js"></script>

<table><tbody><tr><th>Title</th><th>Languages</th></tr></tbody>
<tbody id="movieList"></tbody></table>
<button id="foreignBtn">Foreign</button>
<button id="dramaBtn">Drama</button>

</body>
</html>

test.js
function getMovies( genre, skip, top ) {
$.ajax({
dataType: "jsonp",
url: "http://odata.netflix.com/Catalog/Genres('" + genre
+ "')/Titles?$format=json&$expand=Languages&$skip="
+ skip + "&$top=" + top,
jsonp: "$callback",
success: function( data ) {
var movies = data.d.results;
$( "#movieList" ).empty();
$.tmpl( movies, "#movieTemplate").appendTo( "#movieList" );
}
});
}

$(document).ready(function(){
    var movieTemplate = [
    "<tr>",
    "<td>${Name}</td>",
    "<td>{{tmpl(Languages.results) '#languageTemplate'}}</td>",
    "</tr",
    ].join("\n");

    var languageTemplate = "<em>${Name} </em>";

    $.template("movieTemplate", movieTemplate);
    $.template("languageTemplate", languageTemplate);

    $( "#foreignBtn" ).click( function() {
    getMovies( "Foreign", 0, 4 );
    });

    $( "#dramaBtn" ).click( function() {
    getMovies( "Drama", 0, 4 );
    });
})

The above will fail in firebug with: c.tmpl is not a function

Hi!

I discovered the source of constant ReferenceError being thrown in my templates:
$.tmpl('{{if !user}}NOUSER{{/if}}', {}), though $.tmpl('{{if user}}USER{{/if}}', {}) works silently.

In the guts the first version compiles to ... if((typeof((!user))!=='undefined' && ((!user))!=null) && ... which of course requires user to be in the scope.

Couldn't we fix that (quite valid) case of branching, or at least put big fat warning on templates usage pattern?

TIA,
--Vladimir

Chrome give me an syntax error here:

// Generate a reusable function that will serve to render a template against data
function buildTmplFn( markup ) {
return new Function("jQuery","$item",
// /!\ Uncaught SyntaxError: Unexpected token return

"var $=jQuery,call,_=[],$data=$item.data;" +

Here is my stack trace :
Uncaught SyntaxError: Unexpected token return
jQuery.extend.template
itemsPerPage
jQuery.event.handle
jQuery.event.add.elemData.handle.eventHandle

jquery-tmpl is in dire need of unit tests.

They should likely use QUnit and be available in this repo.

There currently doesn't seem to be any way to pass in jQuery objects (selections) as data parameters.

Considering that this is a jQuery plugin, it would probably be a good idea to allow native jQuery objects to be passed in and automatically converted, using something along the lines of $("div").html(dataItem).html().

See d9d5faf for a sample patch.

If I put ${list.name} in a template, and list doesn't exist on the passed data, a reference error is thrown (list is not defined).

In most template languages — sever-side like django or client side like handlebars.js — there is no such thing as an undefined lookup error. In the case that one of the nested properties isn't defined, the template renderer returns an empty string. That makes the template writer's life much easier since they don't need to have lots of superfluous if statements.

I guess this may be intentional, but it seems to go against the grain of many popular templating languages.

It would be great to suport default values for data which is not supplied - e.g.

<div class='${cssClasses | defaultClass1 defaultClass2}'>
    ${content}
</div> 

So in the example, if the 'cssClasses' data item is not supplied, then the value after the pipe symbol (i.e. 'defaultClass1 defaultClass2') is used. No doubt this behaviour can be replicated with {{if}} & {{else}}, but the above is much more readable and maintainable.

This is an update to closed issue #52
I have mofified the example of "Example: Using {{tmpl}} to render hierarchical data." in http://api.jquery.com/template-tag-tmpl/ to highlight the issue:

test.html



<style>
table {float:left;clear:right;border-collapse:collapse;width:370px;background-color:#f8f8f8;margin:4px;} table td {border:1px solid blue;padding:3px;}
table th {font-weight:bold;border:2px solid blue;padding:1px;} table tbody {border:2px solid blue;} button {float:left;margin:4px;width:70px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="test.js"></script>

<table><tbody><tr><th>Title</th><th>Languages</th></tr></tbody>
<tbody id="movieList"></tbody></table>
<button id="foreignBtn">Foreign</button>
<button id="dramaBtn">Drama</button>

</body>
</html>

test.js
$(document).ready(function(){
var movieTemplate = [
"",
"${Name}",
"{{tmpl(Languages.results) 'languageTemplate'}}",
"</tr",
].join("\n");

    var languageTemplate = "<em>${Name} </em>";

    $.template("movieTemplate", movieTemplate);
    $.template("languageTemplate", languageTemplate);

    $( "#foreignBtn" ).click( function() {
    getMovies( "Foreign", 0, 4 );
    });

    $( "#dramaBtn" ).click( function() {
    getMovies( "Drama", 0, 4 );
    });
})

The above will fail in firebug with: c.tmpl is not a function

Calling a function within a template with a String literal works for the following cases:

${foo('bar')}
${foo("bar")}
${$item.foo("bar")}
${NS.foo("bar"}

But not in the following cases:

${$item.foo('bar')}
${NS.foo('bar'}

In the failing cases the error is 'illegal character'.

A discussion of part of this problem (and some work for a solution that I haven't looked at), is here: http://forum.jquery.com/topic/new-jquery-tmpl-plugin-doesn-t-seem-to-like-namespaced-functions

hi,

for some reason the {{if}} tag in the following snippet will not be recognized by the template plugin :

      <script type="text/javascript">
        $(window).ready( function() {
            $( '.template.default').tmpl({ 
                isEnabled : function() { 
                    return false; 
                }, 
                title : 'foo'
            }).appendTo( 'body');
        });
    </script>
    <div style="display:none">

        <div class="template default">
            {{tmpl( $data) ".fragment.transition"}}
        </div>

        <div class="fragment transition">
            <button 
                class="action" 
                type="button"
                {{if !isEnabled()}} 
                    disabled="disabled"
                {{/if}}

            >
                ${$data.title}
            </button>
        </div>      
    </div>

it gets simply spit out as it comes in.

It is a bug ?

Kind regards,

Lars

I have a template where I'm adding a class to one of the generated elements. I want the class name to be NoWrap, but when it's rendered it's coming through as nowrap. Big difference in the CSS world.

I am using tmpl to build a form.

When I use this: {{if validation.required == true}} bold {{/if}} it will return me a error instead of returning FALSE.

I need to do like this to work:
{{if validation}}{{if validation.required == true}} bold {{/if}}{{/if}}

I am using only 2 levels of data... Imagine if I was using 10.... Please fix this to return false without having to put a if for each parent level.

The following code will break in IE when no panels are passed:
$('#tmpl-panel-column').tmpl();

Given this template:
<script id="tmpl-panel-column" type="text/html">

Changing the line like this prevents the issue:
$('#tmpl-panel-column').tmpl({panels:[]});

Is it a requirement that anything passed to each is required?

I noticed that when dragging around a ui.sortable item that whatever I created using .tmpl is cloned.

It only gets cloned once though and subsequent movement doesn't clone the snippet again.

It doesn't appear to happen with ui.draggable though.

On thing that would be very nice would be to partition the jquery dependency from the the core template engine. I see that useful for two things:

1. When using template on the client side to generate non-HTML ouput (XML, ...)

2. If we want to use this templating engine on the server side. If the jQuery/DOM dependency could be partitioned out, it would be trivial to use the library on top of Java/Rhino or even a JS server engine.

Having a "portable" template engine between the client and server is very powerful.

We experienced a script stack overflow in Firefox consistently when rendering 600 objects with nested properties and a small template. The larger the template the less quantity of objects we could render.

I assume this is isolated to script memory in Firefox 3.6.10 as Chrome didn't experience this issue with the same task. As the intent may be to render in the background then insert a complete work, the obvious suggestion is attaching what rendered in batches of what fits in available memory.

Inside of the function tiCalls(), the value of _ is set to the content. This makes it more difficult to use the Underscore.JS library ( http://documentcloud.github.com/underscore/ ) within a template.

I'd like to propose that __ (double underscore) be used inside of jquery.tmpl.js instead of _ (single underscore) to avoid this collision.

If this change is likely to break existing templates, then perhaps there could be a noconflict option that would avoid using a single underscore and leave it as it was inside the template processing context.

For instance, with the following data:
var objects = {a:1, b:2, c:3};

This template won't work:
There are ${_.size(objects)} objects.

This can be worked around by defining a new global for underscore:
var underscore = _;

Then in the template:
There are ${underscore.size(objects)} objects.

right now templates can include raw javascript. There should be a mode (if not the default) which only allows variables, calls, and (in)equality expressions.
i.e. this should be IMPOSSIBLE:
{{= (get_Val() ? 3*4/this : window.location='http://github.com/jquery/' }}
This kind of strict approach is essential if the implementation can be written cross-language, and force the separation of template and code.

This issue was brought up in the original announcement:
http://forum.jquery.com/topic/templating-syntax#14737000000824492
where the author gives an example of a way to implement this:
http://github.com/borgar/hugs/blob/master/hugs.js#L167

I have a template that looks like the following:

<img src="${thumb}" alt="${name}" />

When I use this template passing both a thumb (string) and a name (string), it ends up generating the following HTML:

<img alt="small" src="$%7Bthumb%7D">

I tested to make sure that 'thumb' was being passed in by trying the variable in a 'p' tag and it worked fine.

Browser: Firefox 3.6
OS: Mac OS X

I figured out that an expression of the {{if}} tag gets evaluated multiple times.

For example

{{if isEnabled()!=true}}
disabled="disabled"
{{/if}}

will result in

if((typeof(isEnabled()!=true)!=='undefined' && (isEnabled()!=true)!=null) &&     
(typeof(isEnabled()!=true)==='function'?(isEnabled()!=true).call($item):(isEnabled()!=true)))
{_.push(' disabled = "disabled" ');

not only that the generated expression is mostly nonsense - it additionally calls the function 4 times which is very inefficient.

is there any option to optimitize the expression handling ?

many regards,

lars

I've noticed that commented HTML markup in my templates gets processed. This might be a good or a bad thing depending on your goal.

If I want to add comments to the generated HTML markup that include information in the data that is used to generate the markup, then processing comments is a good thing.

However, if I'm debugging a template and simply want to comment out a section that is buggy or isn't working yet, commenting the markup doesn't help. This makes it much harder to debug.

Obviously, this isn't a critical issue, but I just wanted to put it out there in case anyone had some thoughts on improving the ease in debugging templates.

One more thing... Inside of comments, HTML elements with values set have an attribute like _tmplitem="40", but outside of comments they do not. Is there a reason for this?

If this is already posted, I apologize. But github issue search has been giving a error for the last hour or so.

Right now plugin allows to pass only predefined objects, but it's not true for every cases. Consider the following example:

{{tmpl ({ checkboxes: true, items: someitems }) "#genlist" }} {{tmpl ({ checkboxes: false, items: otheritems }) "#genlist" }}

I'm surprised to find that the Templates plugin performs very poorly indeed when compared to other jQuery templating plugins - see this blog post by Riley Dutton, who has performed some benchmarking: http://rileydutton.com/post/1286080073/jquery-templates-vs-jqote-2

Please investigate and resolve this poor performance.

Hi!

Firefox (3.6.8, M$ Windows at least) doesn't caches <script id="ID">...</script> in window. This prevents constructs like {{tmpl partial_template}} from working since tmpl code seems to rely on contents of global var partial_template

Couldn't you confirm it's not just my broken setup and/or provide a solution?

TIA,
--Vladimir

I'm using jquery-tmpl to render some ammap data files, and it has something like
<areas><area></area></areas>
in safari,
$.tmpl("<areas><area></area></areas>")[0] spits out <areas></areas>
the inner area is missing.

this works fine in chrome and firefox.

my safari is 5.0.3 (6533.19.4), jquery 1.4.4, jquery-tmpl beta1

thanks!

code example

When adding 10,000 items to an unordered list, jquery-tmpl basically locks up Chrome. It never finishes. If I build the same thing using simple string substition it takes about four seconds. Am I doing something wrong?

in IE8, when loading form elements with data, jquery-tmpl doesn't seem to be able to deal with property values with spaces in them.

What I see after the template has been rendered is that the quotes around the <input value= attribute have been removed. If the value has a space in it, IE picks up the first word only in the field value. Any additional words are pushed into the tag as if they were attributes with no values.

In jquery.tmpl.js, look at line: 287

ret = ret.join("");

At this point the template string gets glued together. If you look at the state of any attributes being set with template values, you'll see that IE has upper-cased the markup tags and removed spaces from the attributes. Firefox doesn't do this. Only IE.

Here's the context:

Object:
var company = { companyName: 'ABC ASDF' };

Template:
<input type="text" id="companyName" name="companyName" value="${companyName}" />

Output:
<INPUT id=companyName value=ABC name=companyName ASDF>

Currently $.tmpl is both a function and parent for the other (callable) properties. That prevents proxying of $.tmpl.

Hi.

I decided to use jquery-tmpl for my java web project. Templates are written in JSP.

In JSP, variables or attributes are inserted through ${} directive that is conflicted with jquery-tmpl.
When my jquery templates are inserted into jsp page and has ${someProperty} it is processed as jsp variable and replaced with value (or whitespece when variable is null).

I think would be better to give ability to override default dollar-sign.
Or it is unusable in JSP.

Hi! How can I include custom JS in templates? Seems if I define <script /> tag, it breaks enclosing <script/ > used to hold templates in HTML.

TIA,
--Vladimir

This might be the wrong place, but right now I don't see an easy way to add functions that can be used inside a template.

Is the current recommendation to just add a set of functions accessible in global scope?

As .tmpl(data) return a jQuery object, that we can continue do some post processing, for example event binding, the tmplItem.update() method should follow the same pattern, so that the newly updated jQuery object should be also returned.

function tiUpdate() {
    var coll = this.nodes;
    var tmpl = jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
    jQuery( coll ).remove();
    return tmpl;
}

}

It's debatable whether we should be able to do this in the first place, but I found that creating functions in expressions will throw an error.

${sum(records, function(r) { return r.value; })}

The above produces the error "Uncaught SyntaxError: Unexpected token )". See this issue reproduced at http://jsfiddle.net/VPvDG/.

Affects 1.0.0pre.

I'm using the qtip plugin which can make use of html stored in an attribute to generate a tooltip. I converted a chunk of code to use templates some of which contain html in the alt attribute. Below is an example:

This construction creates errors when a template is generated in all major browsers specifically:

'nodes' is null or not an object' at line 431.

Some combinations of html don't produce outright errors but do cause rendering problems. Escaping the html clears up the problem in all browsers except IE. The only solution that works cross browser is to remove all characters that could be construed as html. At a minimum I would expect that escaped html contained in attributes should be tempatable across all browsers.

It an array is passed to .tmpl() the template is rendered once for each item in the data array.

It would be great if $index were available inside the template when an array is passed to .tmpl(), as it is when using {{each}}.

Hi! How do I create a temporary "local" variable (to cache result of some repeated calculations) in templates w/o any chance to pollute global namespace?

TIA,
--Vladimir

The error:
Uncaught TypeError: Cannot call method 'push' of undefined

is thrown in Chrome 9 for Windows, or the error:
is null or not an object

is thrown in Internet Explorer 8 for Windows, for the following template:
{{html trailer}}

where trailer equals:

When I add this line of code before trailer gets processed by the template, the error goes away:
trailer = trailer.replace(/tmpl/g, 'null');

I ajax my templates in from a file. In the root template in that file, I'm trying to render a nested template with {{tmpl}} that is in the same file I ajaxed in. However, I get an error in FireBug that c.tmpl is not a function. It seems it can't find the second template in that file. Is there a way to get this working or is this a bug?

If I use this plugin and changes are made to it here, I'll have no way of knowing if my code is outdated.

Can you tag the current source with a version and put it in the commented source?

Hi,

Say I have data:
var data = {name:"outer",
inner:[{name:"in1"}{name:"in2"}{name:"in3"}]
};
and templates
<script id="outerTemplate" type="text/x-jquery-tmpl">
<p>Outer is: ${name}<br />
{{each inner}}
{{tmpl "#innerTemplate"}}
{{/each}}
</p>
</script>

<script id="innerTemplate" type="text/x-jquery-tmpl">
Inner is: ${name}<br />
</script>

Is there any way that I can declare the {{tmpl}} so that the template it references only recieves the relevent data for each instance of 'inner'? I have tried various options, {{tmpl($item) ..}}, {{tmpl($data.group) ..}} but without success. Is this approach possible?

Cheers

For a template like:
<textarea>{{html markup}}</textarea>

where markup is an HTML string, attributes of _tmplitem will be added to each tag in markup.

See http://jsfiddle.net/DiegeticShadow/zLCcR/

is it possible to have a function call to return the resulting html just as a plain string?
at the moment i have to use somehting like

   myHtml = $.tmpl($("#templateList").html(), data)
   data = $('<div />').append(myHtml).html();

i would be able to call something like

  myHtml = $.tmplString($("#templateList").html(), data);

Line breaks are not preserved when being outputed.

What should be outputed (note the line breaks):


\n

${TotalPayments}


<tr>   <td class="tblsubframecontent" align="center"><input name="date[1]" id="date_1" size="10" value="1/1/11" type="text"></td>   <td class="tblsubframecontent" align="center"><input name="amount[1]" id="amount_1" size="10" value="22.2" type="text"></td>   <td class="tblsubframecontent"></td>  </tr><tr>   <td class="tblsubframecontent" align="center"><input name="date[2]" id="date_2" size="10" value="1/1/11" type="text"></td>   <td class="tblsubframecontent" align="center"><input name="amount[2]" id="amount_2" size="10" value="22.2" type="text"></td>   <td class="tblsubframecontent"></td>  </tr><tr>   <td class="tblsubframecontent" align="center"><input name="date[3]" id="date_3" size="10" value="1/1/11" type="text"></td>   <td class="tblsubframecontent" align="center"><input name="amount[3]" id="amount_3" size="10" value="22.2" type="text"></td>   <td class="tblsubframecontent"></td>  </tr><tr>   <td class="tblsubframecontent" align="center"><input name="date[4]" id="date_4" size="10" value="1/1/11" type="text"></td>   <td class="tblsubframecontent" align="center"><input name="amount[4]" id="amount_4" size="10" value="22.2" type="text"></td>   <td class="tblsubframecontent"></td>  </tr>

I noticed that the phpquery library does not pick up on closing HTML tags within jquery-tmpl script blocks. Digging deeper, I found that the 4.01 spec calls for the parser to stop at the first instance of </, which is obviously incompatible with the existing usage of jquery-tmpl. PHP's DOMDocument obeys this rule, so I can't correctly parse documents that contain jquery-tmpl templates.

I believe HTML5 has the same restriction. Or does it? I'm not good at reading this spec.

Hi

Guidance on how to integrate a solution like innerShiv into jquery-templates would be very helpful, as IE does not support insertion of HTML5 tags, even when using the document.createElement('section') fix for tags on the initial HTML page.

Andy

A crate has an id, a name, and many subcrates.
Subcrates can be accessed by calling crate.children().
I want to render them as a hierarchical list.

Unfortunately, {{tmpl(children())}} internally calls $item.children(), so I cannot access the $data.children() from my template.

Here is a template:
(fiddle with JS: http://jsfiddle.net/d4fuX/4/)

<script id="crateTemplate" type="text/x-jquery-tmpl">
  <li data-id="${id}">- ${name}:</li>
</script>

<script id="crateWithChildrenTemplate" type="text/x-jquery-tmpl">
  {{tmpl "crateTemplate"}}
  {{if children().length}}
    <p><i>${children().length} subcrates, should be listed below</i></p>    
    <ul>
        {{tmpl(children()) "crateWithChildrenTemplate"}} <!-- this does not work -->
    </ul>
  {{else}}
    <p><i>no subcrates</i></p>
  {{/if}}
</script>

<h1>Crates:</h1>
<ul id='crates'>
</ul>

Hi! Templates uses internally a variable called _ and I couldn't find any warning about the user SHOULDN'T EVER USE this name in his code. I'd suggest to rename _ to something more obscure such as ___$$$___ to ensure no interference with user code is done.

TIA,
--Vladimir

P.S.
BTW, almost all templating engines have such an issue.
--Vladimir

I created a gist to demonstrate a potential dangerous byproduct of using the with keyword as a convenience in the micro template conversion.

http://gist.github.com/646361

Variables declared with same names as properties in the object will destroy the values of the properties in the object. I've been using the this keyword and a proxy function in a modified version of your original micro templating code for a minor speed bump but, while doing some reading tonight, remembered this other potential danger.

http://github.com/furf/jquery-template/blob/master/jquery.template.js

Just food for thought.

new Function() generate a Sandobox violation in Adobe AIR,so it's not possible to use this plugin to write an AIR application