web-dev-qa-db-ja.com

アンダースコアテンプレートスロー変数が定義されていませんエラー

バックボーン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>
javascriptbackbone.jsunderscore.jsunderscore.js-templating
14
ra170

以前は、次のように1回でアンダースコアテンプレートを解析して入力できました。

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

ただし、Underscore 1.7.0の時点で、 __.template_ の2番目の引数にはテンプレートオプションが含まれています。

テンプレート_.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>_
35
mu is too short

これは便利です

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();
1
Pankaj Bisht