jquery-tmpl comments by BorisMoore

jquery-tmpl comment by BorisMoore

A template context corresponds to an instance of a rendered template, in the HTML DOM. It has fields:
 'data' - the data item that was rendered using the template, 
 'tmpl' - the template that was used, 'nodes' - the HTML elements that were created and were inserted into the DOM, 
 'parent' - the parent template context, in the case of nested templates, e.g. using the {{tmpl }} tag.

tmplcmd provides the following commands:
'update' - re-render the template. The data, tmpl, or expandos on the template context, may have been modified, so the resulting HTML may be different than the previously rendered HTML. - Use update(ctx) to update (i.e. refresh/render the HTML in the DOM) a template context 'ctx' - or update(dataItem, contexts) to find the template context within an array 'contexts' that corresponds to that dataItem, and update that one. - You can also pass an array of contexts or data items as first parameter, and update them all at once.

'remove' - removes the rendered elements from the DOM. - Use remove(ctx) to remove the rendered elements for a template context 'ctx' - or remove(dataItem, contexts) to find the template context within an array 'contexts' that corresponds to that dataItem, and remove that one. - You can also pass an array of contexts or data items as first parameter, and remove them all at once.

'replace' - used for filtering or sorting. - If you pass an array of contexts or data items in the first parameter, and an array of contexts in the second, it will replace the rendered items of the second parameter following the sort order and filtering specified in the first parameter. Missing ones will be removed. Existing ones will be moved to follow the correct sort order.

'find' - used for finding template contexts based on data items. - Use find(data, contexts) to return an array of template contexts taken from 'contexts', and corresponding to the data item or items in 'data'. - The sort order will correspond to 'data' (If 'data' is an array).

Examples from movies.htm:
- bookingCtxs = $.tmplCmd( "replace", data, bookingCtxs ); - $.tmplCmd( "remove", booking, bookingCtxs ); - $.tmplCmd( "remove", bookingCtxs ); - return $.tmplCmd( "find", booking, bookingCtxs)[0];

====



${title} and {{= title}} are equivalent. The first is a shorthand syntax for the second.

${} and {{}} have some built-support for function calls, which is used in the following scenarios:

function upperCase( val ) { 
    return val.toUpperCase(); 
}

Used in:

${upperCase(firstName)} 

Or
function firstNameUpperCase() {

    return this.data.firstName.toUpperCase(); 
}

Used in:

${firstNameUpperCase} 

In the second example there are no parameters, so adding the parens ${firstNameUpperCase()} is optional.
Functions are called with the template context as this, which is how the second example gets to the data.

In your case ${title.toUpperCase()} did not work, because it had the effect of calling a function title.toUpperCase, with template context as this. What you needed here is simply to evaluate title.toUpperCase() (i.e. call String.toUpperCase with title as this) - and that is achieved by adding the space, so the templating implementation doesn't think of title.upperCase as a function to call, but simply as something to evaluate directly. So ${title.toUpperCase() } will work, as will {{= title.toUpperCase() }}.