JSRender内联模板

Question

Using JSRender it's possible to create templates using script tags that are of type "text/x-jsrender". Eg

<script id="movieTemplate" type="text/x-jsrender">
        <li>
            {{>name}} {{>releaseYear}}
        </li>
</script>

It can then be rendered as follows:

<script type="text/javascript">
        $("#movieList").html(
            $("#movieTemplate").render(movies)
        );
</script>

However for simple templates I'd prefer to declare them inline rather than in a separate "text/x-jsrender" script tag. Is this possible? I was thinking something along the lines of:

   var myTemplate = "<li>{{>name}} {{>releaseYear}}</li>";
   var outputHtml = render(myTemplate, movies);

Answer 1

You can do this using $.templates() . You're close you're just missing one line:

var myTemplateText = "<li>{{>name}} {{>releaseYear}}</li>";
var myTemplate = $.templates(myTemplateText);
var outputHtml = myTemplate.render(movies);

As a note though, one of the benefits of templates is you can separate your presentation from your code. Meaning if I'm a designer, I can easily mess with your template HTML without needing to know the JavaScript logic. When you do it the way I show above, you lose that ability since you've mixed presentation and logic. It's up to you whether you're OK with that or not.

In any case there are some good examples of different ways to create templates on the JSRender website .