add script to Jquery template
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<开发者_StackOverflow中文版/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:
- Curly braces are often a problem for jQuery. That's why in the last example I had to use the alternative
{{= }}syntax. - Some JavaScript expressions are not allowed due to security concerns, e.g. Google Chrome won't let you use eval in your templates.
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});
});
加载中,请稍侯......
精彩评论