Kann nicht bekommen Variablen in Underscore.js Vorlage zu interpolieren, während jasmine.js Test

Question

EDIT: Vergessen Sie die Leser daran zu erinnern, dass ich templateSettings zu setzen erinnerte wie folgt:

_.templateSettings = { 
    interpolate : /\{\{([\s\S]+?)\}\}/g 
}; 

Ich habe eine harte Zeit mit einem immer Variabel um im Unterstrich zu interpolieren, während meine Jasmine-Spezifikationen laufen. In Anbetracht der Vorlage, Rendering-Methode und Jasmin Test unten, ich bin in der Lage die Vorlage erhalten Variablen zu interpolieren richtig über:

_.template(
    boneHeaderInstance.template.html(), 
    { id:boneHeaderInstance.id, 
    columns:boneHeaderInstance.columns 
    } 
) 

Während dies die Spalten zu interpolieren nicht variabel:

boneHeader = Backbone.View.extend({ 
    el: $('#boneTableHeader'), 
    template: $('#boneTableHeaderTemplate'), 
    initialize: function(){ 
    this.id = 'boneTableHeader'; 
    this.el = $('#' + this.id); 
    this.columns = 'blah'; 
    this.template = $('#' + this.id + 'Template'); 
    this.render(); 
    return this; 
    }, 
    render: function(){ 
    var that = this; 
    var data = {id: that.id, columns: that.columns} 
    this.el.html(_.template(this.template.html(), data)); 
    } 
}); 

Vorlage:

<script type = 'text/template' id = 'boneTableHeaderTemplate'> 
    <tr id = "{{obj.id}}Row"> 
    {{obj.columns}} 
    </tr> 
</script> 

In Render Methode:

render: function(){ 
    var that = this; 
    var data = {id: that.id, columns: that.columns} 
    this.el.html(_.template(that.template.html(), data)); 
} 

Jasmin Test:

describe('boneHeader', function(){ 
    beforeEach(function(){ 
    boneHeaderInstance = boneTableInstance.header; 
    }); 
    describe('rendering', function(){ 
    it('should have expected html', function(){ 
     expect( 
     boneHeaderInstance.el.html().replace(/\s\t\n/ , '', 'g') 
    ).toEqual( 
     _.template(boneHeaderInstance.template.html(), 
     { id:boneHeaderInstance.id, 
      columns:boneHeaderInstance.columns 
     }).replace(/\s\t\n/ , '', 'g') 
    ); 
    }); 
    }); 
}); 

Jasmin Ergebnis:

Expected ' <tr id="boneTableHeaderRow"></tr> ' to equal ' <tr id = "boneTableHeaderRow"> blah </tr> ' 

Answer 1

Sie haben verschiedene Probleme. Zunächst einmal Underscore uses <% %> for templates es sei denn, Sie ändern es mit so etwas wie:

_.templateSettings = { 
    interpolate : /\{\{(.+?)\}\}/g 
}; 

So sollte Ihre Vorlage wie folgt aussehen:

<script type = 'text/template' id = 'boneTableHeaderTemplate'> 
    <tr id = "<%= obj.id %>Row"> 
     <td><%= obj.columns %></td> 
    </tr> 
</script> 

Ich habe auch den HTML-Fehler behoben Sie in Ihrer Vorlage hatte, Sie kann keinen Textknoten als unmittelbares Kind eines <tr> haben, und es gibt keine Angabe, welche Schikane ein Browser aufstellen wird, wenn Sie so etwas versuchen.

Zweitens wird _.template() in der Regel verwendet, um eine kompilierte Version einer Vorlage zurück und kompilierte Version ist eine Funktion, die Ihnen die endgültige HTML erhalten ausführen zu:

var t = _.template(some_template_html); 
var html = t(data); 

So möchten Sie wahrscheinlich so etwas wie dies in Ihrem Konstruktor:

this.template = _.template($('#' + this.id + 'Template').html()); 

und dies in Ihrem render:

this.el.html(this.template(data)); 

Sie können alles gleichzeitig mit _.template(template_html, context) tun.

Drittens Sie Referenzierung obj.id und obj.columns in der Vorlage aber du bist es nur id und columns so entweder fallen die obj. Präfixe aus Ihrer Vorlage oder verändern data thusly geben:

var data = { 
    obj: { 
     id: that.id, 
     columns: that.columns 
    } 
}; 

Demo: http://jsfiddle.net/ambiguous/NYLqH/

Sie müssen Ihren Test korrigieren, um das korrigierte HTML zu berücksichtigen.