如何从外部文件加载与Hogan.JS模板？(How to load templates with H

我用Hogan.JS如JavaScript模板库。它应该从外部文件加载JavaScript的模板。人们可以很可能在外部JavaScript文件外包几个模板。

有谁知道这是怎么做到的吗？

我有以下的代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/hogan-2.0.0.min.js"></script>
    <script id="scriptTemplate" type="text/mustache">
      <p>Your text here: {{text}}</p>
    </script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var template = $('#scriptTemplate').html();
      var compiledTemplate = Hogan.compile(template);
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

与IDS，我可以解决的模板，但我总是需要一个独立的嵌入式脚本。 :-(

如何与外部文件这项工作？

Answer 1:

你有两个选择来加载外部模板：

预编译模板（Hogan.js恕我直言的最好的功能）或
使用require.js的文本插件加载模板字符串

不幸的是，编制预Hogan.js模板的文档是不存在的。如果你有副本GitHub库，然后里面bin目录是一个脚本调用hulk ，将做的工作。它需要的NodeJS一些沿NPM模块（即nopt和mkdirp安装）。

一旦你nodejs并安装这些模块，给出一个模板文件Test.hogan：

<p>Your text here: {{text}}</p>

使用以下命令可以预编译脚本：

hulk Test.hogan

导致下面的文字：

if (!!!templates) var templates = {};
templates["Test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<p>Your text here: ");t.b(t.v(t.f("text",c,p,0)));t.b("</p>");return t.fl(); },partials: {}, subs: {  }});

这个保存到一个文件名为templates.js

现在，在HTML页面中，你会加载templates.js文件，并创建一个全局对象调用templates在模板编译功能是关键“测试”。您也可以省略hogan.js文件，因为这是编译器（和你的模板现在预编译），只是包括template.js自带的分发文件。

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/template.js"></script>
    <script src="js/templates.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var compiledTemplate = templates['Test'];
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

注：我也有使用当前的一些问题， master了GitHub库的分支，因为它产生的是使用不同的构造比2.0.0模板版本中使用的模板。 如果您使用的hulk一定要使用template.js位于文件lib文件夹。

另外，您也可以使用require.js和文本插件。下载它们，并将它们保存到您js文件夹。然后，你需要添加一个require语句加载模板文本：

<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/require.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      require(['js/text!Test.hogan'], function(testHoganText) {
        // testHoganText contains the text of your template
        var compiled = Hogan.compile(testHoganText);
        var renderedTemplate = compiled.render(data);

        var box = document.createElement('div');
        box.innerHTML = renderedTemplate;
        document.body.insertBefore(box,document.body.childNodes[0]);
      });
    </script>
  </body>
</html>

Answer 2:

还有，如果你不使用节点，工作得非常好另一种方式，也不如果你想依靠require.js

你可以简单地使用jQuery的$不用彷徨拿到路径模板文件。因此，一个例子是这样的：

$.get('templates/book.hogan', function(templates){
            var extTemplate = $(templates).filter('#book-tpl').html();
            var template = Hogan.compile(extTemplate);
            var rendered = template.render(datum);
            $('.marketing').append(rendered);
});

模板可以仅仅是一个.html文件（我只是用.hogan）和所有在模板中的HTML应该被包裹在一个唯一的ID script标签，所以你可以在这里得到的ID。数据来自于（“预输入：选择”），不过这无关我只是觉得我应该解释一下，因为它是在没有其他参考的代码。

Answer 3:

我有同样的问题，结束了做事情比Phuong酒店的不同的方式，我想我会分享它。

服务器端，我编译模板并将其保存到下面的脚本文件：

// template will be a string
var template = hogan.compile(
    '<span>{{text}}</span>',
    { asString: true }
);

// prepare the content of the file we are about to create
var content =
    'if(!templates) var templates = {};' +
    'templates.example = ' + template + ';';

// write to a file that will be called by the client
fs.writeFile('compiledTemplate.js', content, function(err){
    if(err){ console.log('Oops !') }
});

和客户端，我做的：

<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/compiledTemplate.js"></script>
  </head>
  <body>
    <script>

      var data = {
        text: 'Hello World'
      };

      var template = new Hogan.Template(templates.example),
          html = template.render(data);

      var box = document.createElement('div');
      box.innerHTML = html;
      document.body.insertBefore(box,document.body.childNodes[0]);

    </script>
  </body>
</html>

我希望它能帮助！

文章来源: How to load templates with Hogan.JS from an external file?