10

Oglądałem kilka filmów na temat szkieletu js. Jest to przykład prosto z wideo. To jest od 2012 roku, więc myślę, że zmieniły się zasady szkieletu/biblioteka, ale nie mogę zrozumieć, dlaczego to nie działa w tej chwili. W filmie osoba pokazuje, że działa w JS Fiddle, ale nie mogę go uruchomić. (Podaję niezbędne biblioteki w JS Fiddle, czyli podkreślenia, szkieletowe i jQuery)Niewłaściwy błąd szablonu wymiaru podkreślenia

var V = Backbone.View.extend({ 
 
    el:'body', 
 
    render: function() { 
 
    \t 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>

Odpowiedz

32

Kiedyś, aby móc analizować i wypełnić szablon podkreślenia za jednym zamachem jak to :

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

Ale jak od podkreślenia 1.7.0, drugi argument _.template zawiera opcje szablonu:

szablon_.template(templateString, [settings])

szablony Kompiluje JavaScript do funkcji, które mogą być oceniane pod kątem renderowania. [...] Argument powinien być wartością mieszającą zawierającą dowolny kod _.templateSettings, który powinien zostać zastąpiony.

Musisz skompilować szablon używając _.template a następnie wykonać wracającą funkcję zdobycia wypełnione Szablon:

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

W Twoim przypadku będzie to wyglądać mniej więcej tak:

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

To może być u seful

1: Jeżeli masz więcej niż jeden szablon lub kiedyś używasz szablonu zewnętrznego więc może to być przydatne dla Ciebie wewnątrz metody można napisać kod wielokrotnego użytku

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