[英]Using Jade templates in Backbone.js
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. 我通常使用以下样式的Underscore.js模板看到Backbone。
/* 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中呈现它们的方法。
I was able to run Jade client-side using jade-browser project. 我能够使用jade-browser项目运行Jade客户端。
Integration with Backbone is then simple: Instead of _template()
I'm using jade.compile()
. 与骨干网整合是那么简单:与其
_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();
As @dzejkej mentioned above, one of the best known ways to use Jade templates on the client is to use jade-browser; 正如上面提到的@dzejkej,在客户端上使用Jade模板的一种最着名的方法是使用jade-browser; however, I've always had a few issues with Jade in the browser.
但是,我在浏览器中总是遇到一些与Jade有关的问题。
include
statements, you may have to do some extra work to get them to compile properly. include
语句,则可能需要做一些额外的工作才能使它们正确编译。 In addition, if you decide to compile on the server and send JavaScript to the client, you still have issues. {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. {client: true}
编译器选项,但编译后的模板实际上并未针对客户端进行优化,此外,没有机制可以将已编译的Jade模板提供给浏览器。 These are among some of the reasons why I created the Blade project . 这些是我创建Blade项目的部分原因之一。 Blade is a Jade-like templating language that supports client-side templates right out of the box.
Blade是一种类似Jade的模板语言,可直接支持客户端模板。 It even ships with Express middleware designed for serving compiled templates to the browser .
它甚至附带Express 中间件,旨在为浏览器提供已编译的模板 。 If you are okay with a Jade-like alternative for your projects, check it out!
如果您对项目有类似翡翠的替代方案,请查看!
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. 这个体系结构与你提到的有点不同,只是一个名为“templates.js”的模板的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. 无论如何,希望有所帮助。
You might also checkout my new library for jade inside browser. 您也可以在浏览器中查看我的新库以获取jade。 It is as simple as < jade>...< /jade>.
它就像<jade> ... </ jade>一样简单。 https://github.com/charlieamer/jade-query
https://github.com/charlieamer/jade-query
You won't get the full power of Jade templates, but you can hack it a bit to get jade to properly output underscore templates, the key is preventing jade from escaping the <%>
tags with the !
你不会得到Jade模板的全部功能,但你可以通过破解它来让jade正确输出下划线模板,关键是阻止jade使用
!
来逃避<%>
标签!
operator, like so: 运营商,像这样:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.