В данном уроке мы отделим наш шаблон template от представления backbone.view.
Исходный файл main.js выглядит так:
var Person = Backbone.Model.extend({
defaults: {
name: 'Dima',
age: 23,
occupation: 'web developer'
}
});
var PersonView = Backbone.View.extend({
tagName: 'li',
template: _.template("<strong><%= name %></strong>(<%= age %>) - <%= occupation %>"),
initialize: function() {
this.render();
},
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
}
});
var person = new Person;
var personView = new PersonView({ model: person });Добавим в файл index.html следующий код:
<script id="person-id" type="text/template">
<strong><%= name %>;</strong>(<%= age %>) - <%= occupation %>
</script>Чтобы браузер понял, что это не javascript, а именно шаблон, необходимо обязательно указывать type="text/template"
Вернёмся теперь в файл main.js и перепишем 15ую строку так:
template: _.template( $('#person-id').html() )Вот и всё! Мы вынесли наш шаблон из вьюхи и теперь мы можем больше не бояться, что последняя рано или поздно лопнет от всё нарастающего html кода :).
Есть и другой путь проделать то же самое. В свойстве template просто “цепляемся” к айдишнику шаблона:
template: '#personTemplate',А функцию render переписываем следующим образом:
render: function () {
var template = _.template( $(this.template).html() );
this.$el.html(template( this.model.toJSON() ));
}Убедитесь сами – результат тот же. Здесь всё целиком и полностью зависит от вашего стиля.
Источник:loftblog
