在Backbone.js的使用玉模板 [英] Using Jade templates in Backbone.js
问题描述
我喜欢的Node.js翡翠的模板引擎的HAML的语法,我很想在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.
我通常使用Underscore.js模板在以下样式看到骨干。
I've seen Backbone commonly using Underscore.js templating in the following style.
/* 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(或其他方式)来获取玉模板和当前的HTML内作出他们的一种方式。
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.
推荐答案
我可以使用运行翡翠客户端玉浏览器项目。
I was able to run Jade client-side using jade-browser project.
与骨干网的整合是那么简单:与其 _template()
我用 jade.compile()
Integration with Backbone is then simple: Instead of _template()
I'm using 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();
这里 是code。
HERE is the code.
这篇关于在Backbone.js的使用玉模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!