template-test.js

//aqui temos o json com dados que devemos exibir para o usuário

var employeesListByCompany = [
	{
		name: 'Death Star',
		employees: [
			{
				name: 'Darth Vader',
				email: '[email protected]'
			},
			{
				name: 'Emperor',
				email: '[email protected]'
			},
		]
	},
	{
		name: 'Alliance',
		employees: [
			{
				name: 'leia',
				email: '[email protected]'
			},
			{
				name: 'luke',
				email: '[email protected]'
			},
		]
	},
	{
		name: '"Should not exist" cast',
		employees: [
			{
				name: 'Jar Jar Binks',
				email: '[email protected]'
			},
			{
				name: 'Great Pilot Anakin',
				email: '[email protected]'
			},
		]
	}
]

$(document).ready(function () {
	console.log($('#companysTemplate').text())
	
	//companysTemplate recebe o texto no script 'companysTemplate'
	//ao olhar o console, você pode ver que é realmente o que temos escrito lá...	
	var companysTemplate = _.template($('#companysTemplate').text());

	//veja que 'companysTemplate' é uma função
	console.log(companysTemplate)

	//'html' recebe o retorno da função quando passamos o objeto
	//{'employeesListByCompany' : employeesListByCompany}
	//que é o elemento html disponível depois dos templates terem feito o seu trabalho

	//Quando passamos o objeto, estamos dizendo quem será a nossa variável 
	//'employeesListByCompany' presente no index.html.

	var html = companysTemplate({'employeesListByCompany' : employeesListByCompany});

	//adicionamos o contéudo à div 'content' usando o método .html
	$("#content").html(html);
});