Marionette 3 templates work inline, but not when included in a separate file

Question

I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.

The main source file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <title>Gmail API Quickstart</title>
    <meta charset='utf-8' />
</head>

<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">

<script src="messageDetails.js" type="text/javascript"></script>

// This template works

<script type="x-template/underscore" id="mailItem-template">
    <div id="mailItem" class="col-md-12">
            <img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
            <input type="checkbox" style="padding: 10;"/>
    </div>
</script>

// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried

<link href="mailItem.tmpl.html" type="text/html"/>

// I've also tried this, but I get an Syntax error

<script src="mailItem.tmpl.html" type="text/javascript"/>

// View that uses the template

<script src="MessageDetailsView.js" type="text/javascript"></script>

score 0 · Answer 1 · edited May 23 '17 at 12:31

This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.

What you could do is make your external template a javascript.

var myTemplate = _.('My template text');

then you should be able to load that via a tag an expect myTemplate to be available globally.

But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.

More info: Explanation of <script type = "text/template"> ... </script>

Marionette 3 templates work inline, but not when included in a separate file

1 Answers1