は、変数がunderscore.jsテンプレートに補間してもらうことはできませんがjasmine.jsテスト

Question

EDIT：

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

私は苦労取得を持っていた：私は次のようにtemplateSettingsを設定するために覚えて読者を思い出させるために忘れました私のジャスミン仕様を実行しながら、アンダースコアで補間するvarialbe。

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

テンプレート：これは変数の列を補間するために失敗したものの

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

：テンプレート、レンダリング方法、および以下のジャスミンのテストを考えると、私はきちんと経由で変数を補間するテンプレートを取得することができています：

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

でRenderメソッドを：

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

ジャスミンテスト：

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

ジャスミン結果：

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

Answer 1

あなたは、さまざまな問題を抱えています。まず第一に、Underscore uses <% %> for templatesは、あなたのようなもので、それを変更しない限り：

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

だからあなたのテンプレートは次のようになります。私はまた、あなたのテンプレートに持っていたHTMLのエラーを修正した

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

、あなた <tr>の直下の子としてテキストノードを持つことはできません。そのようなことを試してみると、ブラウザがどのような魅力的なメッセージを発するのかは分かりません。第二に、 _.template()は通常、テンプレートとそのコンパイルされたバージョンのコンパイルされたバージョンを返すために使用され

はあなたが最終的なHTMLを取得するために実行する機能です。

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

だからあなたはおそらく、あなたの中にこのような何かをしたいですコンストラクタ：あなたのrenderで

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

と、この：

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

_.template(template_html, context)で一度にすべてを行うことができます。

第三に、あなたはあなたのテンプレートでobj.idとobj.columnsを参照しているが、あなたはだけなので、どちらかお使いのテンプレートからobj.プレフィックスを落としたり、thusly dataを変更し、それをidとcolumnsを与えている：

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

デモ：http://jsfiddle.net/ambiguous/NYLqH/

訂正されたHTMLについては、テストを修正する必要があります。