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集成非常简单：取代_template()我正在使用jade.compile()。

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。如果您对项目有类似翡翠的替代方案，请查看它！

Answer 3

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

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

架构与你提到的有点不同，只是一个名为“templates.js”的模板的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

您也可以在浏览器中查看我的新库中的jade。它就像＆lt;一样简单。玉＆GT; ...＆LT; /玉取代。 https://github.com/charlieamer/jade-query

Answer 5

你不会得到Jade模板的全部功能，但你可以破解它以使jade正确输出下划线模板，关键是阻止jade逃离{{1}使用public class MyVertex { public String colour; } SimpleGraph<MyVertex, DefaultEdge> g = new SimpleGraph<MyVertex,DefaultEdge>(DefaultEdge.class); MyVertex v1 = new MyVertex(); MyVertex v2 = new MyVertex(); g.addVertex(v1); g.addVertex(v2); DefaultEdge edge = g.addEdge(v1, v2); //traverse graph Graphs.getOppositeVertex(g, edge, v1).colour = "red";运算符的标记，如下所示：

<%>

在Backbone.js中使用Jade模板

5 个答案: