如何导入一个完整的下划线模板文件？ [英] How can I import a file full of Underscore templates?

问题描述

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

As is in any project expected, 90% of my main HTML file is composed of many different templates, just like this:

<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家伙可以对自己对他们的工作。把他们在另一个文件中很容易，但我怎么能稍后导入这些？我试过但随后的浏览器尝试，并且，当然，失败，国米preT它作为JavaScript的code。 TYPE =文本也会失败。任何想法？

I'd like to put them elsewhere, so the UX guys can work on them on their own. Putting them in another file is easy, but how can I import them later? I've tried but then the browser tries, and, of course, fails, to interpret it as javascript code. type="text" also fails. Any idea?

感谢您！

推荐答案

我使用的具有文本插件模块加载程序（requireJS）。它允许您定义模板文件作为参数，并骨干视图中使用。

I use a module loader (requireJS) which has a text plugin. It allows you to define your template file as an argument and use inside the Backbone View.

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

A Backbone View with require looks something like this.

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;
});

要加入到这一点，使用下划线的 _。模板（）很容易插入值。

To add to this, using underscore's _.template() it's easy to interpolate values.

说我templateFileName.html看起来像这样

Say my templateFileName.html looks like this

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

所有你所要做的哈希值传递这些属性名称来填充HTML。

All you have to do is pass in the hash with those property names to populate the html.

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

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

这篇关于如何导入一个完整的下划线模板文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！