Verwenden von Lenkern für bedingte CSS

Question

Im folgenden Ausschnitt würde ich erwarten, dass Zeile a die Klasse new-entry und Zeile c die Klasse moving-up hat, was aber nicht der Fall ist.

Ich bin sicher, dass dies ein dummer Fehler, aber ich kann es nicht

Handlebars.registerHelper("newEntry", function() { 
 
    return this.newEntry ? 'class="new-entry"' : ''; 
 
}); 
 

 
Handlebars.registerHelper("movingUp", function() { 
 
    return this.movingUp ? 'class="moving-up"' : ''; 
 
}); 
 

 
var source = document.getElementById('leaderboard-template').innerHTML; 
 
var template = Handlebars.compile(source); 
 
var outlet = document.getElementById('outlet'); 
 

 
    outlet.innerHTML = template({leaders: [ 
 
    {name: 'a', signature_count: 10, newEntry: true}, 
 
    {name: 'b', signature_count: 8}, 
 
    {name: 'c', signature_count: 6, movingUp: false}, 
 
    ]});

.new-entry { 
 
    background-color:red; 
 
} 
 
.moving-up { 
 
    color:red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script> 
 

 
<script id="leaderboard-template" type="text/x-handlebars-template"> 
 
    <table> 
 
     <thead> 
 
      <th>Constituency</th> 
 
      <th>Votes</th> 
 
     </thead> 
 
     <tbody> 
 
      {{#leaders}} 
 
      <tr {{newEntry}}> 
 
       <td>{{name}}</td> 
 
       <td><span {{movingUp}}>{{signature_count}}</span></td> 
 
      </tr> 
 
      {{/leaders}} 
 
     </tbody> 
 
    </table> 
 
</script> 
 

 
<div id="outlet"></div>

Answer 1

Lenker wandelt den Rückgabewert eines Helfer sehen ein HTML-String entkommen. Verwenden Sie Handlebars.SafeString wie diese, wenn Sie nicht wollen, dass:

Handlebars.registerHelper("newEntry", function() { 
    return new Handlebars.SafeString(this.newEntry ? 'class="new-entry"' : ''); 
}); 

Handlebars.registerHelper("movingUp", function() { 
    return new Handlebars.SafeString(this.movingUp ? 'class="moving-up"' : ''); 
});