Underscore.js - Vorlage kompiliert nicht beim ersten Mal

Question

Ich versuche, eine Vorlage mit underscore.js aus der Funktion zu rendern, ausgelöst, wenn ein Ajax-Aufruf (der mir den JSON, den ich brauche) erfolgreich ist.

ich eine Art seltsamen Verhalten bin erleben:

• Wenn der Ajax-Aufruf zum ersten Mal erfolgreich ist, bekomme ich diesen Fehler:

Uncaught ReferenceError: response is not defined

• Wenn es gelingt, für Beim zweiten Mal, ohne die Seite zu aktualisieren, läuft alles wie gewünscht.

Meine JSON hat diese Struktur:

{ 
    data: [ 
     item1: {count: "1", url: "http://example1.com", id:"arstd", formatted:"1"}, 
     item2: {count: "53", url: "http://example2.net", id:"hneio", formatted:"0"}, 
     ... 
    ] 
} 

Meine Underscore.js Vorlage:

<script type="text/template" id="count_template"> 
    <% _.each (response.data, function (item) { %> 
    <a href="<%- item.url %>"> 
     <li> 
      <p id="<%- item.id %>" class="name"> 
       <%- item.formatted %> 
      </p> 
      <p id="<%- item.id %>_count" class="count"> 
       <%- item.count %> 
      </p> 
     </li> 
    </a> 
    <% }); %> 
</script> 

Meine Ajax-Callback-Funktion:

var on_result_count_fetched = (function() { 
    var totals = $(".regions .count"); 
    var ajax_loader = $("#ajax_loader"); 
    var c_tl = $('#count_template'); 
    var count_div = $('#res_count'); 
    //getting the template for the count response 
    if (c_tl) { 
     var c_template = _.template(c_tl.html()); 
    } 
    _.templateSettings.variable = "response"; 
    //real callback 
    return function (response) { 
     if (response.redirect) { 
      window.location.replace(data.redirect); 
     } else { 
      //hide loading animation 
      ajax_loader.hide(); 
      if (!response && _.isEmpty(response)) { 
       var tmp = $("<button>In case of fail: do this other action!</button>") 
       tmp.click (function() { 
        fetch_results ("searx"); 
       }); 
      } else { 
       console.log(response); 
       var tmp = c_template(response); 
      } 
      count_div.empty(); 
      count_div.append(tmp); 
     } 
    } 
}()); 

Answer 1

Wenn Sie sagen _.template(some_string), Unders verwendet die Werte von _.templateSettings zum Analysieren some_string und konvertieren Sie es in eine JavaScript-Funktion. Sobald _.template Ihnen eine kompilierte Template-Funktion zurückgegeben hat, spielt der Inhalt von _.templateSettings keine Rolle mehr.

Sie diese Art der Sache zu tun:

var t = _.template(some_string); 
_.templateSettings.variable = "response"; 

so kommt Ihre _.templateSettings.variable Zuordnung zu spät Ihren _.template Anruf zu beeinflussen. Sie müssen _.templateSettingsvor Aufruf _.template so diese anzupassen:

if (c_tl) { 
    var c_template = _.template(c_tl.html()); 
} 
_.templateSettings.variable = "response"; 

aussehen sollte mehr:

if (c_tl) { 
    _.templateSettings.variable = "response"; 
    var c_template = _.template(c_tl.html()); 
} 

Oder Sie könnten _.templateSettings ganz überspringen und sagen:

var tmp = c_template({ response: response }); 

beim Aufruf die Vorlagenfunktion. Herumalbern mit _.templateSettings kann Nebenwirkungen haben, wenn Ihre anderen Vorlagen nicht erwarten, response zu verwenden, um auf ihre Daten zuzugreifen. Konfigurieren Sie _.templateSettings global an genau einem Ort oder lassen Sie es in Ruhe ganz in der Regel besser funktionieren.