Невозможно получить переменные для интерполяции в шаблоне underscore.js во время тестирования jasmine.js - PullRequest
Новая
       14

Невозможно получить переменные для интерполяции в шаблоне underscore.js во время тестирования jasmine.js

0 голосов
/ 03 апреля 2012

РЕДАКТИРОВАТЬ: забыл напомнить читателю, что я запомнил, чтобы установить 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: 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> '

1 Ответ

2 голосов
/ 03 апреля 2012

У вас есть различные проблемы. Прежде всего, Underscore использует <% %> для шаблонов , если вы не измените его на что-то вроде: 

_.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.

...