How do erb-style templates work in marionette?

In the documentation concerning Marionette.ItemView, you can find this template:

<script id="some-template" type="text/html">
  <ul>
    <% _.each(items, function(item){ %>
    <li> <%= item.someAttribute %> </li>
    <% }); %>
  </ul>
</script>

To call this template into action, we use something like this:

var MyItemsView = Marionette.ItemView.extend({
  template: "#some-template"
});

I use this kind of template and it works fine, but I don't understand how it works. Mostly, what I don't understand is how to reproduce the above without using a script tag. See my attempt below:

var MyItemsView = Marionette.ItemView.extend({
  template: function (items) {
    return _.template("<ul><% _.each(items, function (item) { %><li><% item.someAttribute %></li><% }); %></ul>");
  }
});

Could someone explain how this works and where the items object comes from?

Solution

Mostly, what I don't understand is how to reproduce the above without using a script tag.

The template is a string that Underscore knows how to parse into a function. If you want to move your templates out of script tags, you can move them into their own files and precompile them or if you're using Require.js, require them as a dependency using the text plugin.

... where the items object comes from?

From the Marionette ItemView docs:

The important thing to note here, is the use of items as the variable to iterate in the _.each call. This will always be the name of the variable that contains your collection's items.