javascript - 在Backbone.js中使用Jade模板

我喜欢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中的方法。

最佳答案

我能够使用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 是代码。

关于javascript - 在Backbone.js中使用Jade模板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8528885/