将变量从骨干视图发送到jade模板

时间:2015-03-06 18:09:20

标签: javascript node.js backbone.js pug

我的index.jade中有以下模板:

....
<script type="text/template" id="sample-template">
  a(href="<%= link.href %>") <%= link.title %>
</script>
....

我的骨干视图中有以下代码,它将一个名为link的变量发送到index.jade。

....
var SampleView = Backbone.View.extend({
  template: _.template($('#sample-template').html()),

  render: function() {
    this.$el.append(this.template({
      link: this.model.toJSON()
    }));
    return this;
  }
});
....

现在当我渲染该模板时,我得到以下输出:

<a href="<%= link.href %>"> sample link

你知道,我得到了title变量的正确输出。但问题在于href。它不会打印link.href的值。

1 个答案:

答案 0 :(得分:0)

最后我发现它有什么问题。因为jade是与node一起使用的模板引擎(实际上在服务器端),所以它在客户端使用方面缺乏支持。因此,当您使用下划线jade函数编译_.template模板时,您不能指望功能模板文件。 但是有另一种方法可以将变量从骨干视图发送到jade模板。您可以创建一个帮助函数,在玉石模板中打印您想要的内容。

....
var SampleView = Backbone.View.extend({
  template: _.template($('#sample-template').html()),

  render: function() {
    this.$el.append(this.template({
      link: this.model.toJSON(),
      ahref: this.ahref
  }));
  return this;
  },

  ahref: function( href, title ) {
    return '<a href=' + href + '>' + title + '</a>';
  }

});
....

然后我需要将link辅助函数传递给jade模板。

....
<script type="text/template" id="sample-template">
  ahref(link.href, link.title);
</script>
....