Главная

Webmacter V.2 Всё для вебмастера » Уроки по JS » Backbone.js 8 – отделение шаблона от представления

Backbone.js 8 – отделение шаблона от представления

Backbone.js 8 – отделение шаблона от представления


В данном уроке мы отделим наш шаблон 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(&quot;<strong><%= name %></strong>(<%= age %>) - <%= occupation %>&quot;),

	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=&quot;person-id&quot; type=&quot;text/template&quot;>
	<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
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.