So far we've created a View, which acts as the bulk of the HTML for a specific page, and a layout, which acts as the wrapper for the consistent parts of the website on every page. Next up, let's take a look at creating partials, which are really just small views that we can reuse and inject inside our layouts or views.
Partials are a terrific way to create reusable components in your website and reduce code duplication. Consider the comments in our application. We have an HTML form defined that a user uses to submit a comment, but what if we wanted to allow users to post comments from a number of different areas throughout the website. This type of scenario is a great candidate for moving our comment form out to its own partial and then just including that partial anywhere we want to display the comment form.
For this app, we're using partials specifically for the sidebar in the main layout. With every view's ViewModel, we will include a JavaScript object called sidebar that will contain the data specifically for the stats, popular images, and recent comments found within the sidebar partial.
Let's create the HTML for each of the partials. First, create a file named stats.handlebars within the views/partials/ path and include the following HTML code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Stats
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2 text-left">Images:</div>
<div class="col-md-10 text-right">{{ sidebar.stats.images }}</div>
</div>
<div class="row">
<div class="col-md-2 text-left">Comments:</div>
<div class="col-md-10 text-right">{{ sidebar.stats.comments }}</div>
</div>
<div class="row">
<div class="col-md-2 text-left">Views:</div>
<div class="col-md-10 text-right">{{ sidebar.stats.views }}</div>
</div>
<div class="row">
<div class="col-md-2 text-left">Likes:</div>
<div class="col-md-10 text-right">{{ sidebar.stats.likes }}</div>
</div>
</div>
</div>Next up, create views/partials/popular.handlebars and insert the following HTML code into it:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Most Popular
</h3>
</div>
<div class="panel-body">
{{#each sidebar.popular}}
<div class="col-md-4 text-center" style="padding-bottom: .5em;"><a href="/images/{{uniqueId}}"><img src="/public/upload/{{filename}}" style="width: 75px; height: 75px;" class="img-thumbnail"></a></div>
{{/each}}
</div>
</div>Finally, create views/partials/comments.handlebars and insert the following HTML code into it:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Latest Comments
</h3>
</div>
<div class="panel-body">
<ul class="media-list">
{{#each sidebar.comments}}
<li class="media">
<a class="pull-left" href="/images/{{ image.uniqueId }}">
<img class="media-object" width="45" height="45" src="/public/upload/{{ image.filename }}">
</a>
<div class="media-body">
{{comment}}<br/>
<strong class="media-heading">{{name}}</strong> <small class="text-muted">{{timeago timestamp }}</small>
</div>
</li>
{{/each}}
</ul>
</div>
</div>