<script> tag inside jquery template

Question

Backgroud:

I have this template that includes videos from youtube being loaded with swfobject.

Question:

Is there a way to include a script tag...

<script type="text/javascript">
</script>

inside a jQuery Template??

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <script type="text/javascript">
        <!-- Some javascript here -->
    </script>
</script>

Obviously it doesn't work directly, is there any way to achive the same thing without the script inside other script?

Phosphorite

Answer 1

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <script type="text/javascript">
        <!-- Some javascript here -->
    {{html "</sc"+"ript>"}}
</script>

You can use {{html "</sc"+"ript>"}} replace </script>

Florrie

Answer 2

Not sure if this is the only way, but you can insert the script as raw HTML for the template:

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    {{html innerScript}}
</script>

Then:

var innerScript = '<script type="text/javascript"><!-- Some javascript here --></script>';
$('#filaVideoTemplate').tmpl({innerScript: innerScript});

Phlyctena

Good one but the script is not trivial, and I don't want to have the script as a variable, that is exactly why I am using templates in the first place – Miliary

@Carlos, yeah it is sidestepping the whole template engine essentially. Why don't you have the script as an external JS file though? – Phlyctena

Beacuse the script is diferent for every item in the template, it is generated dinamically from the result of a json call. – Miliary

@Carlos, it sounds like a bad idea to template javascript. If it's javascript, why can't you pass the json data as an argument? – Phlyctena

@Carlos You're probably not taking the right approach. Keep your code outside of your templates, wrapped in functions, that take as arguments the variables you think you need within those script templates. You should end up with something simpler, faster and cleaner. – Bind

@Metal, @Box9 you're right I'll try leaving the javascript outside – Miliary

Answer 3

Ronny Wang's answer offered a good place to start for my problem. However, his solution didn't work for me -- the .. tags in the body of the jQuery template was causing problems on my MVC3 Razor view page.

Fortunately, I stumbled across a solution ( details @ https://github.com/jquery/jquery-tmpl/issues/94 ) that works and requires only a minor change. Here's Ronny's answer, but with a fix that should make it MVC3-compatible:

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
    <!-- Some HTML here -->
    <scr{{= ""}}ipt type="text/javascript">
        <!-- Some javascript here -->
    </scr{{= ""}}ipt>
</script>

Looks like both the opening and closing tag just need to be broken up. Hope this helps!

Gaven

Answer 4

<script id="filaVideoTemplate" type="text/x-jQuery-tmpl">
   <!-- Some HTML here -->  
</script>



var data = [{ 'Id': '1', 'Name': 'a' }, { 'Id': '2', 'Name': 'b' }, { 'Id': '3', 'Name': 'c'}];

var renderedHtml = $('<div />').html($('#filaVideoTemplate').tmpl(data)).append(('<script type="text/javascript"><!-- Some javascript here --></endScript>').replace(/endScript/g, 'script')).html();

if data is single not a collection above code is correct. else ( data is collection ) the script tag used to bind multiple times ( data.length times ).

Mandamus

Answer 5

not sure what you asking but: you can use ajax request and put your template inside of (js) file . my template_script.js the use ajax like so:

$('the element').load('template_script.js').then( OK , fail );

function OK(){
  do something if request was ok.
}

function fail(){
  do something if request was not ok.
}

Uxmal