[英]Using Jade templates in Backbone.js
我喜欢Node.js中Jade模板引擎的类似HAML的语法,我很乐意在Backbone.js中使用它的客户端。
我通常使用以下样式的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>
我想看到的是一种使用AJAX(或其他方法)获取Jade模板并在当前HTML中呈现它们的方法。
我能够使用jade-browser项目运行Jade客户端。
与骨干网整合是那么简单:与其_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();
这是代码。
正如上面提到的@dzejkej,在客户端上使用Jade模板的一种最着名的方法是使用jade-browser; 但是,我在浏览器中总是遇到一些与Jade有关的问题。
include
语句,则可能需要做一些额外的工作才能使它们正确编译。 此外,如果您决定在服务器上编译并将JavaScript发送到客户端,则仍然存在问题。 每当Jade模板使用文件包含时,您编译的Jade模板可能会变得相当大,因为它们反复包含相同的代码。 例如,如果您反复包含相同的文件,该文件的内容将被多次下载到浏览器,这会浪费带宽。 {client: true}
编译器选项,但编译后的模板实际上并未针对客户端进行优化,此外,没有机制可以将已编译的Jade模板提供给浏览器。 这些是我创建Blade项目的部分原因之一。 Blade是一种类似Jade的模板语言,可直接支持客户端模板。 它甚至附带Express 中间件,旨在为浏览器提供已编译的模板 。 如果您对项目有类似翡翠的替代方案,请查看!
我刚开源了一个名为“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());
无论如何,希望有所帮助。
您也可以在浏览器中查看我的新库以获取jade。 它就像<jade> ... </ jade>一样简单。 https://github.com/charlieamer/jade-query
你不会得到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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.