Can I execute jQuery script syntax like,
$('some-selector').val(${data});
inside my jQuery template?
How do I hook up event handlers for controls inside the jQuery template, where the event handler is in the template, without writing script outside the template?
So, I know this doesn't work:
<script id="modal-edit-mail" type="text/x-jquery-tmpl">
<button id="killswitch">Stop Now</button>
$('#killswitch').click(function(){some function});
</script>
To your first question:
Yes, you can place Javascript expressions (including function calls) inside your templates using the ${expr} or {{= expr}} syntax. These examples all worked for me using Chrome:
${myTemplateVariable}
${Math.max(Math.min(1, myTemplateVariable), 4)}
${$("#test").html()}
{{= String({"foo": "bla"})}}
But there are some problems:
{{= }} syntax.Additionally, if the code you want to include in your template is rather complex it is a good idea to define a function on the special $item template variable. E.g.
$("#myTemplate").tmpl(myData, {"myComplexFunction": function () {
// doing complex stuff here
(...)
return someBadAssValue;
}}).appendTo("#myTargetElement");
Then you could write the following template code:
${$item.myComplexFunction()}
See the documentation of the second parameter to the tmpl function: http://api.jquery.com/tmpl/
To your second question (how to hook up event handlers):
When I used jQuery I wrote separate functions for updating each part of a page with the current data. To that end, the functions would empty() certain divs in the page and render the new content with the appropriate jQuery templates. In the very same functions I then re-configured all event handlers, i.e. after the new HTML has been inserted into the page.
I know that there is some (badly/not documented) update() method with which jQuery templates can be updated more directly, but I think that would still require you to reconfigure your event handlers (in case new interactive elements had been added by the update).
EDIT: To know which element triggered a certain event, I used HTML-IDs that included the data element's ID, e.g.
<a href="javascript:void" id="remove_person_5">Remove</a>
And this JS code for setting up the event handlers:
$("[id^='remove_person_']").click(handle_remove_person);
No - it's a template. Templates are meant to separate presentation and functionality.
You can add a separate JS script that adds the functionality you want. In the <head> section of your page, just add a link to it thusly:
<script type="text/javascript" src="killswitch.js"></script>
Then, in killswitch.js, add the selector and click function, like you have above, inside a ready function so that it fires when the whole page finishes loading:
$(document).ready(function() {
$('#killswitch').click(function(){some function});
});
