无法获取变量在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当然。