RequireJS: More with templating - Dynamic data

Find the previous episode here.

Checkout the part 3 branch

git checkout -b part4.0 origin/part4.0

Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone.

So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text.
The index.html wil looks like this

<div>
  <ul>
    <li><a href="#home">Home</a></li>
     <li><a href="#employee">Employees</a></li>
     <li><a href="#project">Projects</a></li>
  </ul>
</div>
<div id="maincontent">
   	
</div>

Next we will add some more dummy content to other template html file in projects and employees. And also change the controllers to load and how the content. And also we need to change the router.js like this

function routerFn(ctx) {
        if (ctx.hash === 'home') {
            require(['modules/home/HomeCtrl'], function(home) {
                home.start();
            });
        } else if (ctx.hash === 'employee') {
            require(['modules/employee/EmployeeCtrl'], function(home) {
                home.start();
            });
        } else if (ctx.hash === 'project') {
            require(['modules/projects/ProjectsCtrl'], function(home) {
                home.start();
            });
        } else {
            page('#home');
        }
    }

Now if we click the links it will load the appropriate controller and template. Now we need to create the model and populate it in the template. Instead of API we will be using json files.
First we will be populating the employees. For this we will create a dummy json in data folder.
In EmployeeModel.js we will change the code to some this like

define(['jquery'], function($) {
    "use strict";
    function getEmployees(callback) {
        $.getJSON("./data/employee.json", function(data) {
            callback(data);
        });
    }
    return {
        getEmployees: getEmployees
    }
});

In the above we will be loading Jquery as it's dependency module and define a function getEmployees as the function to load the list of employees. We will make the function available to by returning it . We will be using callback function model to pass the data to the controller.
In the controller EmployeeCtrl we will change like following

define(['jquery', 'underscore', './EmployeeModel', 'text!./templates/EmployeeList.html'],
    function($, _, model, tmpl) {
        function start() {
            model.getEmployees(function(data) {
                console.log(data);
                var utmpl = _.template(tmpl);
                $("#maincontent").html(utmpl({
                    list: data.Employees
                }));
            });
        }
        return {
            start: start
        };
    });

Lets check the controller . we will load the model using require and call the getEmployees function using the model refernce. On the callback function we will pass the data to the template . You could see we pass the Employees array into the template as list as the reference.
Next we will change the Employees.html to populate the data.

<div>
	<h1>Employees</h1>
	<p>
		Here is our Employee
	</p>
	<table>
		<tr>
			<th>First Name</th>
			<th>Lastname</th>
			<th>JobTitle</th>
			<th>Phone</th>
			<th>Email</th>
		</tr>
		<% _.each(list, function(item, index){ %>
		
		<tr>
			<td><%- item.firstName%></td>
			<td><%- item.lastName%></td>
			<td><%- item.jobTitleName%></td>
			<td><%- item.phoneNumber%></td>
			<td><%- item.emailAddress%></td>
		</tr>
		<%})%>
	</table>
</div>

Now refresh the page and see the magic, The list will be populated in the employees page.
The magic lies in the strong templating utility of underscore. The data will be populated using _.each functio which will loop the array and populate the data. You could see more options regarding underscore templating in here.