Não é possível obter variáveis ​​para interpolar no modelo underscore.js enquanto o teste jasmine.js - backbone.js, underscore.js, jasmine

EDIT: Esqueci de lembrar ao leitor que me lembrei de definir as configurações de template da seguinte maneira:

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

Estou tendo dificuldade em conseguir um varialbe parainterpolar em sublinhado, enquanto executa minhas especificações Jasmine. Dado o modelo, o método de renderização e o teste de jasmim abaixo, posso obter o modelo para interpolar variáveis ​​corretamente por meio de:

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

Embora isso falhe em interpolar a variável de colunas:

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

Modelo:

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

Método In Render:

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

Teste de jasmim:

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

Resultado de Jasmim:

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

Respostas:

2 para resposta № 1

Você tem vários problemas. Em primeiro lugar, Usos de sublinhado <% %> para modelos a menos que você altere com algo como:

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

Portanto, seu modelo deve ser assim:

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

Eu também corrigi o erro de HTML que você tinha em seu modelo, você não pode ter um nó de texto como filho imediato de um <tr> e não há como dizer que tipo de trapaça um navegador fará se você tentar fazer isso.

Em segundo lugar, _.template() geralmente é usado para retornar uma versão compilada de um modelo e essa versão compilada é uma função que você executa para obter o HTML final:

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

Então você provavelmente quer algo assim em seu construtor:

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

e isso no seu render:

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

Você pode fazer tudo de uma vez com _.template(template_html, context) Apesar.

Em terceiro lugar, você "está referenciando obj.id e obj.columns no seu modelo, mas você está apenas dando id e columns então, ou largue o obj. prefixos do seu modelo ou alter data assim:

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

Demonstração: http://jsfiddle.net/ambiguous/NYLqH/

Você terá que corrigir seu teste para levar em conta o HTML corrigido, é claro.

---