Доброго времени суток!Задача шаблонизатора упростить жизнь разработчику. Представьте себе у вас есть 10 однотипных html страниц, в которых все отображение и порядок тэгов одинаковый, а разное только наполнение. Зачем же писать все эти 10 страниц вручную, когда можно написать один шаблон, и просто вставлять в него необходимые данные. Думаю, ответ очевиден. Итак, представляем вашему вниманию, замечательный, встроенный в underscore.js шаблонизатор

Вспомним модель и вид, что мы уже имеем. А так же анти-шаблон, написанный на прошлом уроке.

var Person = Backbone.Model.extend({
	defaults: {
		name: 'Иван Петров',
		age: 40,
		job: 'слесарь'
	}
});


var PersonView = Backbone.View.extend({
	tagName: 'li',

	initialize: function() {
		this.render();
	},

	render: function() {
		//анти-шаблон
                this.$el.html( this.model.get('name') + ' (' + this.model.get('age') + ') - ' + this.model.get('job'));
	}
});

var person = new Person();
var personView = new PersonView({ model: person });

Давайте заменим анти-шаблон, новым и правильным. Напишем свойство template и опишем в нем наш underscore шаблон.

var PersonView = Backbone.View.extend({
	tagName: 'li',

	template: _.template('<strong><%= name %></strong> ( <%= age %> ) - <%= job %>'),

	initialize: function() {
		this.render();
	},

	render: function() {
	}
});

Обратите внимание на синтаксис. Между пишутся имена переменных, которые шаблонизатор будет компилировать. Далее вставим в наш li элемент, наш скомпилированный шаблон, с переданными в json формате атрибутами нашей модели.

var PersonView = Backbone.View.extend({
	tagName: 'li',

	template: _.template('<strong><%= name %></strong> ( <%= age %> ) - <%= job %>'),

	initialize: function() {
		this.render();
	},

	render: function() {
               this.$el.html( this.template( this.model.toJSON() ) );
	}
});

Все работает как часы! Но что если, вам шаблон гораздо сложней, чем одна строка списка? Не будете же вы описывать его в том же файле, где описана логика вашего приложения? Правильно, для этого существуют внешние шаблоны, и о них вы узнаете в следующем скринкасте! До встречи.