How to write a lodash template loader for requirejs

Question 1

Taking the questions in reverse order:

is there a better way to do this?

It seems there is an existing implementation of this, and you might want to consider using it rather than writing your own. Although the simple case is a small amount of code, there are a bunch of r.js optimizer-related things you might eventually need.

But regarding your implementation logic, I noticed that this similar project for Handlebars does not use the text! plugin but instead does its own XHR in the load() method. This is not explained, but he gives some guidance for adapting it to other templating languages. Note: the link came from this question where there is some other good discussion of the approach.

How can I stop text! from adding a semi-colon?

I tried your plug-in and did not get any added semicolons. Perhaps you could post more of the sample project and templates? Below is mine, with everything in one flat folder for simplicity:

require.js: latest from RequireJS site

domReady.js: latest from RequireJS site

text.js: latest from RequireJS site

lodash.js: latest from lodash site

tmpl.js: your example loader from the question

index.html:

<!DOCTYPE html>
<html>
<head>
    <script src='require.js'></script>
    <script>
    requirejs.config({
        map: {
            '*': { 'underscore': 'lodash' }
        }
    });
    require( [ 'underscore', 'tmpl!friend-template.htm', 'domReady!' ]
        , function( _, friendTemplate ){

        var friendsData = [{ name: 'Bob', age: 35 }, { name: 'Fred', age: 38 }];
        document.body.innerHTML = friendTemplate( {friends: friendsData});
    });
    </script>
</head>
<body>
    <!-- To be populated dynamically. -->
</body>
</html>

friend-template.htm:

<ul>
    <% _.forEach(friends, function(friend) { %>
    <li>
        <span><%- friend.name %></span>
        <span>( Age: <span class="value"><%- friend.age %></span> )</span>
    </li>
    <% }); %>
</ul>

Question 2

I've created a loader specifically for Lo-Dash which you can see here:

https://gist.github.com/tbranyen/6821045

Note: I have no unit tests or assurances this free of bugs, but from my initial testing it appears to work fantastic.

This is better in a number of ways than requirejs-tpl which bakes in it's own implementation which is not exposed. It also requires a file extension and hardcoded path. Both of these are configurable in my code.

Edit: I've since released a project called lodash-template-loader which has tests. https://github.com/tbranyen/lodash-template-loader