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

Underscore template throwing variable not defined error

提问by ra170

I've watched some videos on the topic of backbone js. This is an example straight from the video. It is from 2012, so I'm thinking backbone rules/library have changed, but I can't figure out why this does not work at the moment. In the video, the person shows it running in the JS Fiddle, but I can't get it to work. (I've included the necessary libraries in JS Fiddle, i.e. underscore, backbone and jQuery)

我看过一些关于主干 js 主题的视频。这是直接来自视频的示例。它是从 2012 年开始的，所以我认为主干规则/库已经改变，但我不知道为什么现在这不起作用。在视频中，该人显示它在 JS Fiddle 中运行，但我无法让它工作。（我已经在 J​​S Fiddle 中包含了必要的库，即下划线、主干和 jQuery）

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>

回答by mu is too short

You used to be able to parse and fill in an Underscore template in one go like this:

您曾经可以像这样一次性解析和填充 Underscore 模板：

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

But as of Underscore 1.7.0, the second argument to _.templatecontains template options:

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

template_.template(templateString, [settings])

Compiles JavaScript templates into functions that can be evaluated for rendering. [...] The settingsargument should be a hash containing any _.templateSettingsthat should be overridden.

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

将 JavaScript 模板编译为可用于渲染的函数。[...] settings参数应该是一个散列，包含任何_.templateSettings应该被覆盖的内容。

You have to compile the template using _.templateand then execute the returned function to get your filled in template:

您必须使用编译模板_.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);

In your case, it would look something like this:

在您的情况下，它看起来像这样：

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>

回答by Pankaj Bisht

This can be useful

这很有用

1: If you have more then one template or sometime you are using external template so it can be useful for you inside method you can write reusable code

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();