Javascript 木偶3模板可以内联工作,但不包括在单独的文件中

Javascript 木偶3模板可以内联工作,但不包括在单独的文件中,javascript,templates,inline,marionette,Javascript,Templates,Inline,Marionette,我已经能够让我的木偶3模板工作时,他们是内联的。当我在.html文件中包含模板时,在呈现视图时会出现NoTemplateError。我见过使用TemplateCache和require的示例,但我不明白为什么不能在正文中包含template.html文件并使其工作 主源文件 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <title>Gmail API

我已经能够让我的木偶3模板工作时,他们是内联的。当我在.html文件中包含模板时,在呈现视图时会出现NoTemplateError。我见过使用TemplateCache和require的示例,但我不明白为什么不能在正文中包含template.html文件并使其工作

主源文件

<!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>

Gmail API快速入门
//此模板有效

<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>

//如果我注释掉上面的模板并将其放入.html文件中,则该模板在视图中不起作用。我试过了

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

//我也尝试过这个,但是我得到了一个语法错误

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

//使用模板的视图

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

这是因为使用
标记不会加载它。基本上,如果
标记不是javascript,浏览器将不使用它。。这很方便,因为您可以稍后获取它以将其用作模板,但浏览器永远不会加载外部模板

您可以做的是将外部模板设置为javascript

var myTemplate = _.('My template text');
然后,您应该能够通过一个标签加载它,期望
myTemplate
在全球范围内可用

但最好的选择是使用webpack之类的构建工具预编译模板,并将其作为javascript直接导入脚本

更多信息: