Question

使用

<script type="text/template" id="templateid">
<!-- Template content goes here -->
</script>

代码效果很好。

但是，如果我把模板作为外部文件，如

<script type="text/template" id="templateid" src="template.js"></script>

这不会工作。

上述两种方法之间的区别是什么？我如何解决这个问题？或者我在这里遗漏了一些可能很明显的东西？

Answer 1

即使我接受了另一个答案，我仍然以几种不同的方式实施了这个特殊要求。我发布了我发现的最好和最简单的方法，我认为这对于那些不想使用像木偶等任何模板引擎的人来说非常有用。

使用Backbone和Underscore：

文件夹结构

文件夹Structure可以如下：

Root:
├───css
├───js
│   ├───router.js
│   ├───model.js
│   ├───view.js
│   └───config.js   
├───templates
│   ├───home.html
│   ├───login.html
│   └───register.html   
└───images
└───index.html

基本模板

您需要有一个基本模板（index.html），您将在其中呈现不同的模板。这将确保每次呈现新页面时都不会加载诸如听众，页脚，导航菜单等常见的html内容，从而大大增加页面加载速度。

样本结构如下：

<html>
<head>
<!--Relevant CSS files-->
</head>
<body>
<div class="template_body">
    <div class="header">  
         <!--HTML content for header-->
    </div>
    <div class="content" id="template">
          <!--This would be where the dynamic content will be loaded-->
    </div>
    <div class="footer">
         <!--HTML content for footer-->
    </div>
</div>
<!--Include relevant JS Files-->
</body>
</html>

注意：请注意，您可以根据需要决定模板的结构。我正在使用的是一个更普遍的，所以每个人都可以轻松地与它相关。

查看

在您的视图中，您可以将特定模板呈现到基本模板，如下所示：

var LoginView = Backbone.View.extend({ el: "#template",//Container div inside which we would be dynamically loading the templates initialize: function () { console.log('Login View Initialized'); }, render: function () { var that = this; //Fetching the template contents $.get('templates/login.html', function (data) { template = _.template(data, {});//Option to pass any dynamic values to template that.$el.html(template);//adding the template content to the main template. }, 'html'); } }); var loginView = new LoginView();

请注意，el标记非常重要。

要传递值以进行查看，只需将其传递给：

var data_to_passed = "Hello"; $.get('templates/login.html', function (data) { template = _.template(data, { data_to_passed : data_to_passed }); //Option to pass any dynamic values to template that.$el.html(template); //adding the template content to the main template. }, 'html');

在模板中：

<%=data_to_passed;%>//Results in "Hello"

您可以传递数组，对象甚至变量。

希望这会有所帮助。干杯

Answer 2

如果您只是尝试使用各种示例中的$("#templateid").html()之类的内容来获取模板文本，则仅当文本在<script>标记中实际内联时才会起作用。

通常，无法使用<script>标记获取远程文件的内容。

如果要加载外部模板，则必须使用代码显式获取内容（例如，使用JQuery的$.get()或require.js和文本插件。）

以下是有关如何在Backbone上下文中获取外部模板的更多详细信息：

http://c2journal.com/2012/12/26/backbone-js-external-template-files-the-proper-way/ - 纯Backbone + JQuery
http://jsdude.wordpress.com/2012/12/11/requirejs-and-backbone-template-preloading/ - 使用require.js及其文本插件

但要小心 - 过度使用此解决方案会导致许多其他请求获取模板，结果导致应用程序相当缓慢。通常，以常规方式嵌入模板（在<script>标记中内联）更好的性能。

单独的模板文件不使用主干和下划线呈现

2 个答案: