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

Question

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

我看过一些关于骨干js的视频。这是视频中的一个例子。这是从2012年开始的，所以我认为主干规则/库已经改变了，但是我不知道为什么这在目前不起作用。在视频中，这个人显示它在JS Fiddle中运行，但我无法让它工作。(我在JS 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>

Answer 1

这可能很有用1：如果您有多个模板，或者有时使用外部模板，那么在方法内部，您可以编写可重用的代码。var&nbsp;V&nbsp;=&nbsp;Backbone.View.extend({ &nbsp;&nbsp;&nbsp;&nbsp;el:'body', &nbsp;&nbsp;&nbsp;&nbsp;temp:&nbsp;function&nbsp;(str)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;reusable&nbsp;code &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;_.template(str); &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;{&nbsp;lat:&nbsp;-27,&nbsp;lon:&nbsp;153&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;calling&nbsp;your&nbsp;view&nbsp;method&nbsp;temp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;tmpl&nbsp;=&nbsp;this.temp('<%=&nbsp;lat&nbsp;%>&nbsp;<%=&nbsp;lon&nbsp;%>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$el.html(tmpl(data)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this; &nbsp;&nbsp;&nbsp;&nbsp;}});var&nbsp;v&nbsp;=&nbsp;new&nbsp;V();v.render();