Using a partial for articles

Summary

In this chapter, we focus on refactoring our views to follow the DRY (Don't Repeat Yourself) principle. Instead of duplicating article markup across multiple pages, we extract it into a partial and reuse it where needed.

Key steps:

1. Create a partial for the article list.

2. Refactor the homepage and articles page to use this partial.

3. Pass data to the partial dynamically.

By the end, our views will be cleaner and more maintainable.

Transcript

All right, so in this chapter, we’re focusing on refactoring. If you notice, both our homepage and articles page contain the same article list. Instead of duplicating markup, let’s extract it into a partial so we can reuse it.

Creating a partial for articles

1. Inside the views/ directory, create a new folder called partials/.

2. Create a new file:

   views/partials/articles.ejs

3. Move the article list markup from home.ejs into articles.ejs.

Using the partial in home.ejs

In home.ejs, replace the article list with:

<%- include ('../partials/articles') %>

Here:

• <%- %> ensures the partial renders HTML instead of outputting it as a string.

• '../partials/articles' is the relative path to the partial.

Now, if we start our Sails server and check localhost:1337, we should still see our articles on the homepage.

Using the Partial in articles.ejs

Now, let’s reuse the same partial in articles.ejs:

1. Remove the article list markup.

2. Replace it with:

   <%- include ('../partials/articles') %>

3. Refresh the page, and we should still see all articles.

Fixing data scope issues

When testing, we might run into an error:

ReferenceError: recentArticles is not defined

This happens because:

• In home.ejs, we passed recentArticles to the view.

• But in articles.ejs, we only have articles, not recentArticles.

Solution: Pass Data to the Partial

Sails allows us to override local variables when including a partial.

Modify home.ejs:

<%- include ('../partials/articles', { articles: recentArticles }) %>

This ensures:

• The partial receives articles, no matter which page it's on.

Now, both the homepage and articles page work without issues! 🎉

Why this matters

• Easier maintenance: Updating the article layout only requires changes in one file.

• Code reusability: We avoid copy-pasting the same markup.

• DRY principle: We reuse components, just like in React or Vue.

Now, if we ever want to redesign the article list, we only need to update articles.ejs inside partials/. 🚀