下划线模板抛出变量未定义错误

 var V = Backbone.View.extend({
  el:'body',
  render: function () {
  	var data = { lat: -27, lon: 153 };
    this.$el.html(_.template('<%= lat %> <%= lon%>', data));
    return this;
  }
});

var v = new V();

v.render(); 

 <script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script> 

#1 楼

您曾经能够像这样一遍式地解析和填写Underscore模板：

var html = _.template(template_string, data);

但是从Underscore 1.7.0开始，_.template的第二个参数包含模板选项：


模板_.template(templateString, [settings])

将JavaScript模板编译为可评估以进行渲染的函数。 [...] settings参数应为包含应覆盖的所有_.templateSettings的哈希值。


您必须使用_.template编译模板，然后执行返回的函数来填充在模板中：

var tmpl = _.template(template_string);
var html = tmpl(data);

// or as a one-liner, note where all the parentheses are
var html = _.template(template_string)(data);

对于您来说，它看起来像这样：

 var V = Backbone.View.extend({
  el:'body',
  render: function () {
    var data = { lat: -27, lon: 153 };
    var tmpl = _.template('<%= lat %> <%= lon %>');
    this.$el.html(tmpl(data));
    return this;
  }
});

var v = new V();

v.render(); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script> 

#2 楼

1：如果您有一个以上的模板，或者有时您正在使用外部模板，那么它对内部方法很有用，您可以编写可重复使用的代码

var V = Backbone.View.extend({
    el:'body',
    temp: function (str) {

        // reusable code
        return _.template(str);
    },
    render: function () {
        var data = { lat: -27, lon: 153 };

        // calling your view method temp        
        var tmpl = this.temp('<%= lat %> <%= lon %>');
        this.$el.html(tmpl(data));

        return this;
    }
});

var v = new V();
v.render();