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

IT技术 javascript backbone.js underscore.js underscore.js-templating
2021-01-27 00:30:42

我看过一些关于主干 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>

2个回答

您曾经可以像这样一次性解析和填充 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>

这很有用

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();
其它你可能感兴趣的问题
上一篇JavaScript 中的 MAC 地址 下一篇Facebook 如何禁用浏览器的集成开发者工具？