Javascript 在 Backbone.js 中使用 Jade 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8528885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jade templates in Backbone.js
提问by Josh Smith
I love the HAML-like syntax of Jade's templating engine in Node.js, and I would love to use it client-side within Backbone.js.
我喜欢 Node.js 中 Jade 模板引擎的类似 HAML 的语法，我也喜欢在 Backbone.js 中在客户端使用它。
I've seen Backbone commonly using Underscore.js templating in the following style.
我已经看到 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>
What I'd like to see is a way to use AJAX (or some other method) to fetch Jade templates and render them within the current HTML.
我想看到的是一种使用 AJAX（或其他一些方法）来获取 Jade 模板并在当前 HTML 中呈现它们的方法。
采纳答案by kubetz
I was able to run Jade client-side using jade-browserproject.
我能够使用jade-browser项目运行 Jade 客户端。
Integration with Backbone is then simple: Instead of _template()I'm using jade.compile().
与 Backbone 的集成很简单：而不是_template()我使用jade.compile().
HTML (scripts and 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 (integration with Backbone.View):
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();
HEREis the code.
这里是代码。
回答by BMiner
As @dzejkej mentioned above, one of the best known ways to use Jade templates on the client is to use jade-browser; however, I've always had a few issues with Jade in the browser.
正如@dzejkej 上面提到的，在客户端上使用 Jade 模板的最广为人知的方法之一是使用 jade-browser；然而，我一直在浏览器中遇到一些关于 Jade 的问题。
- Compiling Jade templates is slow- which is okay, but really, all templates should be cached, and if you cache them on the client, anytime they load a new page, the cache disappears (unless using HTML5 persistent storage, for example).
- File includes can be a pain and can create excess bloat.If you are compiling Jade templates on the browser and the template contains
includestatements, you may have to do some extra work to get them to compile properly. In addition, if you decide to compile on the server and send JavaScript to the client, you still have issues. Whenever Jade templates use file includes, your compiled Jade templates can get rather large because they contain the same code over and over. For example, if you include the same file again and again, that file's contents will be downloaded to the browser several times, which is wasting bandwidth. - Lack of support- Jade provides little support for client-side templates out of the box. Yes, you can use the
{client: true}compiler option, but the compiled templates are really not optimized for the client, and in addition, there is no mechanism for serving compiled Jade templates to the browser.
- 编译 Jade 模板很慢——这没关系，但实际上，所有模板都应该被缓存，如果你将它们缓存在客户端上，只要它们加载新页面，缓存就会消失（除非使用 HTML5 持久存储，例如）。
- 文件包含可能会很痛苦，并且会造成过度膨胀。如果您在浏览器上编译 Jade 模板并且模板包含
include语句，您可能需要做一些额外的工作才能使它们正确编译。此外，如果您决定在服务器上编译并将 JavaScript 发送到客户端，您仍然会遇到问题。每当 Jade 模板使用文件包含时，您编译的 Jade 模板会变得相当大，因为它们一遍又一遍地包含相同的代码。例如，如果您一次又一次地包含同一个文件，该文件的内容将被多次下载到浏览器，这会浪费带宽。 - 缺乏支持- Jade 对开箱即用的客户端模板提供很少的支持。是的，您可以使用
{client: true}编译器选项，但是编译后的模板确实没有针对客户端进行优化，此外，也没有将编译后的 Jade 模板提供给浏览器的机制。
These are among some of the reasons why I created the Blade project. Blade is a Jade-like templating language that supports client-side templates right out of the box. It even ships with Express middleware designed for serving compiled templates to the browser. If you are okay with a Jade-like alternative for your projects, check it out!
这些是我创建Blade 项目的一些原因。Blade 是一种类似于 Jade 的模板语言，支持开箱即用的客户端模板。它甚至带有 Express中间件，旨在为浏览器提供编译模板。如果您对项目的 Jade 式替代品感到满意，请查看它！
回答by Brad C
I just open sourced a nodejs project, called "asset-rack", that can can precompile jade templates and offer them in the browser as javascript functions.
我刚刚开源了一个名为“asset-rack”的nodejs项目，它可以预编译jade模板并在浏览器中作为javascript函数提供它们。
This means that rendering is blazingly fast, even faster then micro-templates because there is no compilation step in the browser.
这意味着渲染速度非常快，甚至比微模板还要快，因为浏览器中没有编译步骤。
The architecture is a little different then what you mention, just one js file for all templates called "templates.js" or whatever you want.
该架构与您提到的略有不同，所有模板只有一个 js 文件，称为“templates.js”或任何您想要的。
You can check it out here, https://github.com/techpines/asset-rack#jadeasset
你可以在这里查看，https://github.com/techpines/asset-rack#jadeasset
First you set it up on the server as follows:
首先在服务器上进行如下设置：
new JadeAsset({
url: '/templates.js',
dirname: __dirname + '/templates'
});
If you template directory looked like this:
如果您的模板目录如下所示：
templates/
navbar.jade
user.jade
footer.jade
Then all your templates come into the browser under the variable "Templates":
然后所有模板都进入浏览器变量“模板”下：
$('body').append(Templates.navbar());
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'});
$('body').append(Templates.footer());
Anyway, hope that helps.
无论如何，希望有帮助。
回答by charlieamer
You might also checkout my new library for jade inside browser. It is as simple as < jade>...< /jade>. https://github.com/charlieamer/jade-query
您也可以在浏览器中查看我的新库以获取 jade。它就像<玉>...</玉>一样简单。https://github.com/charlieamer/jade-query
回答by DigitalDesignDj
You won't get the full power of Jade templates, but you canhack it a bit to get jade to properly output underscore templates, the key is preventing jade from escaping the <%>tags with the !operator, like so:
您不会获得 Jade 模板的全部功能，但您可以稍微修改一下以让 jade 正确输出下划线模板，关键是防止 jade<%>使用!运算符转义标签，如下所示：
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
