Using jsRender instead of jquery template plugin

Question

I'm using jQuery 1.9+ and I want to use jsRender instead of jQuery template, since it's deprecated and I can't use in my application.

I've seen couple of examples on https://github.com/BorisMoore/jsrender, escpecially the first example. Its code is in a html file, and it is used by a html file, but what I want to do it in a seperate javascript file. I want to do this, because I have a pretty big application and I store the jquery/javascript function inside a js file.

So I would like to modify this code:

    <script id="movieTemplate" type="text/x-jsrender">
        <div>
                {{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}})
        </div>
</script>

<div id="movieList"></div>

<script type="text/javascript">

        var movies = [
                { name: "The Red Violin", releaseYear: "1998" },
                { name: "Eyes Wide Shut", releaseYear: "1999" },
                { name: "The Inheritance", releaseYear: "1976" }
        ];


        $( "#movieList" ).html(
                $( "#movieTemplate" ).render( movies )
        );

</script>

How should I modify this code to use it in a js file? Or is there any template engine what I could use instead of jQuery template plugin?

Thanks the help in advance!

Answer 1

Templates can be compiled either from strings, or from script blocks in HTML files.

See Registering templates: $.templates() - for example the sample which uses:

var myTmpl = $.templates("<label>Name:</label> {{:name}}");

var person = {name: "Robert"};

var html = myTmpl.render(person);

$("#peopleList").html(html);

See also other examples on the site, such as:

• Compile/register/get a template
• Sample: Loading remote templates