Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Build a Simple Dynamic Site with Node.js Creating a Basic Template Engine in Node.js Binding Values

thimoschroeder
thimoschroeder
23,470 Points

fileContents = mergeValues(values, fileContents) - means exactly what?

Hey,

I'm having a hard time to understand what this line of code means:

fileContents = mergeValues(values, fileContents)

In this context:

function view(templateName, values, reponse) { //Read from the template file var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf-8"}); //Insert values in to the content fileContents = mergeValues(values, fileContents); //Write out the contents to the response reponse.write(fileContents); }

Any help is greatly appreciated ! Thanks.

fileContents = mergeValues(values, fileContents).

To try and explain what the above means, I will break it down into smaller chunks.

================================================================================================

var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf-8"});

The line above is grabbing all of the .html files from the folder 'views' and then storing them in the variable 'fileContents'.

mergeValues(values, content) This is a function designed to cycle through all of the keys within this function's first 'values' argument. It then identifies any place-holder text, within the second argument of 'content', that looks like this: "{{" + key + "}}" e.g({{AvatarURL}}), and replaces it with the key's value in the 'values' argument. After it has done this, it then returns the 'content' variable as its final output.

Here is where things are going to start sounding a little complicated, but stick with it.

When the 'view' function is called, it takes three arguments: view(templateName, values, response);

'templateName' refers to the .html templates in the 'views' folder. 'values', in this case, refers to the values within the values object (i.e AvatarURL; badges; points...). 'response' is just a variable to hold what information the function returns. So now this function has the templates from the 'view' folder, the 'values' from the user's parsed JSON data, and the response that the function returns.

The 'view' function then initiates the fs.readFileSync, grabbing all of the .html files from the folder 'views' and then storing them in the variable 'fileContents'.

Now let's get down to brass tax.

'view()' then calls the 'mergeValues()' function.

'mergeValues(values, fileContents)' takes, for its first argument, the 'values' variable. 'values' is the data passed into the view() function's second argument which is then passed along and into 'mergeValues()' as its first argument. 'mergeValues()' then takes, as its second argument 'fileContents' which, as I have said previously, is all of the .html files in the 'views' folder. It then cycles through each of the .html files, finds any placeholder ({{ + key + }}) text and replaces it with the corresponding values in the 'values' variable. It then stores the outcome of this process back into the 'fileContents' variable, overwriting any previous information.

'fileContents' then gets passed into the 'view()' function's third argument, with the use of response.write. The 'response' variable is then ready for use within another outside function.

I hope that this has helped and hasn't just confused you a whole lot more. If there is anything that you don't understand about this answer, don't hesitate to get in touch.

Happy coding.

James Barrett
James Barrett
13,253 Points

Hi Daniel Thomas , thanks for the detailed answer. When you say ' grabbing all of the .html files from the folder 'views' ' - do you mean it's cycling through the .html files which are actually being passed into the view function? For example, if we go to the /username route, it's going to cycle through the 'profile.html' and the 'footer.html'.