如何导入一个完整的下划线模板文件?(How can I import a file full of

2019-10-17 03:46发布

正如预料中的任何项目,我的主HTML文件的90%是由许多不同的模板,就像这样:

<script type="text/template" id="template-parametros">
  <div id="parametros">
    <h2>Parâmetros</h2>
    <table id="tab-parametros">
      <tr><td>Descrição</td><td>Tipo</td><td>Locale</td></tr>
    </table>
    <button id="parametros-ad">Adicionar</button>
  </div>
</script>

我希望把它们放在别的地方,所以UX人可以自己对他们的工作。 他们将在另一个文件是容易的,但我怎么能稍后导入这些? 我试过,但随后的浏览器尝试,并且,当然,失败,把它解释为JavaScript代码。 类型=“文本”也会失败。 任何想法?

谢谢!

Answer 1:

我使用的具有文本插件模块加载器(requireJS)。 它允许您定义模板文件作为参数和骨干视图中使用。

一个骨干查看与要求看起来是这样的。

define([
    'jquery',
    'underscore',
    'backbone',
    'text!/templates/templateFileName.html'  // Define the template using text! plugin
], function($, _, Backbone, myTemplate) {  // Include the template as an argument
    "use strict";

    ViewName = Backbone.View.extend({
        template: _.template(myTemplate),  // Setup my template (underscore)
        events: {
            ...
        },
        initialize: function() {
            ...     
        },
        render: function() {
            $(this.el).html(this.template()); // render the template
            return this;
        }
    });

    return ViewName;
});

要添加到这一点,使用下划线的_.template()可以很容易地插入值。

说我的templateFileName.html看起来像这样

<section>
    <div>
        <%= name %>
    </div>
    <div>
        <%= age %>
    </div>
</section>

所有你所要做的就是在哈希通过这些属性名称来填充HTML。

var myHash = {"name":"Felix", "age":"9"};

$(this.el).html(this.template(myHash));


Answer 2:

怎么样:

if (!async) async = false;
$.ajax({
    async: async,
    url: '/template/' + templateId,
    dataType: 'json',
    success: function(response) {
        $('body').append(response.content);
    }
});


文章来源: How can I import a file full of Underscore templates?