在 Backbone.js 中使用 Jade 模板

Question

我喜欢 Node.js 中 Jade 模板引擎的类似 HAML 的语法，我很想在 Backbone.js 中的客户端使用它。

我见过 Backbone 通常使用以下样式的 Underscore.js 模板。

/* Tunes.js */
window.AlbumView = Backbone.View.extend({
  initialize: function() {
    this.template = _.template($('#album-template').html());
  },

  // ...
});

/* Index.html */
<script type="text/template" id="album-template">
  <span class="album-title"><%= title %></span>
  <span class="artist-name"><%= artist %></span>
  <ol class="tracks">
    <% _.each(tracks, function(track) { %>
      <li><%= track.title %></li>
    <% }); %>
  </ol>
</script>

我希望看到一种使用 AJAX（或其他方法）获取 Jade 模板并在当前 HTML 中呈现它们的方法。

Answer 1

我能够使用 jade-browser 项目运行 Jade 客户端。

与 Backbone 的集成很简单：我使用的是 jade.compile()，而不是 _template()。

HTML（脚本和模板）：

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

<script type="template" id="test">
div.class1
  div#id
    | inner
  div#nav
    ul(style='color:red')
      li #{item}
      li #{item}
      li #{item}
      li #{item}
script
  $('body').append('i am from script in jade')
</script>

JavaScript（与 Backbone.View 集成）：

var jade = require("jade");

var TestView = Backbone.View.extend({

  initialize: function() {
    this.template = jade.compile($("#test").text());
  },

  render: function() {
    var html = this.template({ item: 'hello, world'});
    $('body').append(html);
  }
});

var test = new TestView();
test.render();

HERE 是代码。

Answer 2

正如上面提到的@dzejkej，在客户端使用 Jade 模板的最著名方法之一是使用 jade-browser；但是，我在浏览器中使用 Jade 时总是遇到一些问题。

• 编译 Jade 模板很慢 - 这没关系，但实际上，所有模板都应该被缓存，如果你在客户端缓存它们，每当它们加载新页面时，缓存就会消失（除非使用 HTML5 持久化例如存储）。
• 文件包含可能会很麻烦，并且会导致过度膨胀。如果您在浏览器上编译 Jade 模板并且模板包含 include 语句，您可能需要做一些额外的工作才能让它们编译适当地。此外，如果您决定在服务器上编译并将 JavaScript 发送到客户端，您仍然会遇到问题。每当 Jade 模板使用文件包含时，您编译的 Jade 模板会变得相当大，因为它们一遍又一遍地包含相同的代码。例如，如果您一次又一次地包含同一个文件，该文件的内容将多次下载到浏览器中，这会浪费带宽。
• 缺乏支持 - Jade 对开箱即用的客户端模板提供的支持很少。是的，您可以使用{client: true} 编译器选项，但编译后的模板确实没有针对客户端进行优化，此外，没有将编译好的 Jade 模板提供给浏览器的机制。

这些是我创建Blade project 的部分原因。 Blade 是一种类似 Jade 的模板语言，它支持开箱即用的客户端模板。它甚至附带 Express middleware designed for serving compiled templates to the browser。如果您对项目的类似 Jade 的替代方案感到满意，请查看！

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage

Answer 3

我刚刚开源了一个名为“asset-rack”的nodejs项目，它可以预编译jade模板并在浏览器中作为javascript函数提供。

这意味着渲染速度非常快，甚至比微模板更快，因为浏览器中没有编译步骤。

架构与您提到的略有不同，只有一个用于所有模板的 js 文件，称为“templates.js”或任何您想要的。

你可以在这里查看，https://github.com/techpines/asset-rack#jadeasset

首先你在服务器上进行如下设置：

new JadeAsset({
    url: '/templates.js',
    dirname: __dirname + '/templates'
});

如果你的模板目录看起来像这样：

templates/
  navbar.jade
  user.jade
  footer.jade

然后你所有的模板进入浏览器的变量“模板”下：

$('body').append(Templates.navbar());
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'});
$('body').append(Templates.footer());

无论如何，希望对您有所帮助。

Answer 4

您还可以在浏览器中查看我的新翡翠库。就像... 一样简单。 https://github.com/charlieamer/jade-query

Answer 5

您不会获得 Jade 模板的全部功能，但您可以稍微破解一下让 jam 正确输出下划线模板，关键是防止 jam 转义 <%> 标签使用! 运算符，如下所示：

script#dieTemplate(type='text/template')
    .die(class!='value-<%= value %>')
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-circle
        i.fa.fa-star