JQuery Templates: pass html parameter into a function

Question

I have this JQuery template:

$.tmpl('<p>${text}</p>', { text: 'cool text' }).appendTo('div');

Works great. but now I want to pass a html parameter into it, but the following won't work.

$.tmpl('<p>${text}</p>', { text: '<span>cool text</span>' }).appendTo('div');

Any suggestions?

which is the jquery template engine used

Arun P Johny
– Arun P Johny

2016-02-08 06:02:35 +00:00
Commented Feb 8, 2016 at 6:02 — Arun P Johny
– Arun P Johny, Commented Feb 8, 2016 at 6:02

Arun P Johny · Accepted Answer · 2016-02-08 06:09:55Z

2

You can use the {{html content}} construct

$.tmpl('<p>{{html text}}</p>', {
  text: '<span>cool text <b>bold</b></span>'
}).appendTo('div');

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div></div>

answered Feb 8, 2016 at 6:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

khushboo29 · Accepted Answer · 2016-02-08 06:18:18Z

1

There is one more way you can do it

var markup = "<span>${text}</span>";

jQuery.template( "template1", markup );
jQuery.tmpl( "template1", { text: "cool text" } ).appendTo( "div" );

answered Feb 8, 2016 at 6:18

khushboo29

9169 silver badges17 bronze badges

Collectives™ on Stack Overflow

JQuery Templates: pass html parameter into a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related