無法獲取變量在underscore.js模板插值而jasmine.js測試

Question

編輯：忘了提醒我想起了如下設置templateSettings讀者：

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

我有一個很難得到一個varialbe插入下劃線，同時運行我的Jasmine規格。鑑於模板，繪製方法，並在下面茉莉測試，我能夠得到模板正確通過插值變量：

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

雖然這不能插變量列：

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

模板：

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

所以你的模板應該是這樣的：

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

我也固定在你的模板有HTML錯誤，不能將文本節點作爲<tr>的直接子節點，並且不知道如果嘗試這樣的事情，瀏覽器會遇到什麼樣的問題。

其次，_.template()通常用於返回模板的編譯版本和編譯的版本是，你執行得到最終的HTML功能：

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

所以，你可能要在像這樣的構造函數：

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

，這在您的render：

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

儘管您可以一次使用_.template(template_html, context)。

第三，如果引用在模板obj.id和obj.columns，但你只給它id和columns所以無論是從您的模板掉落obj.前綴或改變data正是如此：

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

演示：http://jsfiddle.net/ambiguous/NYLqH/

你必須修復你的測試，以解決糾正的HTML當然。