Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Sequelize allows you to extend models with additional functionality. Since Sequelize models are ES6 classes, you can easily add custom instance level methods that encapsulate the functionality. In this video, you'll create helper methods to format an article's publish date and short description.
Code Snippets
publishedAt() {
const date = moment(this.createdAt).format("MMMM D, YYYY, h:mma");
return date;
}
shortDescription() {
const shortDesc = this.body.length > 200 ? this.body.substring(0, 200) + "..." : this.body;
return shortDesc;
}
Resources
Sequelize allows you to extend models
with additional functionality.
0:00
Since Sequelize modules are ES6 classes,
0:04
you can easily add custom instance
methods to encapsulate the functionality.
0:07
In this video, we'll create a published at
helper method which formats the publish or
0:12
created at date and article byline.
0:17
And a short description method that
generates a short description for
0:19
an article when displayed in
the main article listing view.
0:23
Again, these methods will be available
to all model instances created or
0:25
invoked in the context of each model
hence the name instance methods.
0:30
At the top of the models, article.js file,
we'll first require the moment npm
0:35
package, which will bring in the moment.js
library we'll use to format and
0:40
display the publish date for each article.
0:45
Inside the article class,
create a method named publishedAt.
0:55
In the method, declare a variable named
date to store the formatted date.
1:05
Then set it to the moment method.
1:12
We wanna format the created at
timestamp of each model instance.
1:17
So past moment,
this.createdAt as the value to format.
1:22
Then we'll format the timestamp using the
moment libraries format method, like so.
1:28
This will display the publish date
as month, day, year and time.
1:37
Then we'll return the date variable
which holds the formatted date.
1:45
You can copy this exact snippet and
1:53
learn more about the moment.js library
in the teachers notes with this video.
1:55
Next, you access the value returned by
a model instances published at method in
2:00
the view by simply calling the method.
2:05
Open the file, views, articles,
2:07
by-line and replace article.createdAt,
2:12
with article.publishedAt.
2:18
Back in the app,
looking at the main article listing and
2:24
the individual articles,
I see the formatted dates.
2:28
Next, inside the article class,
I'll generate the short article
2:38
description with a method
called short description.
2:42
Inside the method,
declare a variable named shortDesk,
2:49
which will hold the short description.
2:54
I'll limit the short description
to a maximum of 200 characters.
2:57
I'll use a conditional ternary operator
to specify if this.body.length or
3:01
the length of the body property,
is greater than 200.
3:08
Return the portion of the text
starting at the zero character
3:13
index to the 200 character
with this.body.substring (0,
3:19
200) And,
3:25
I want to display an ellipses at the end,
to show that the article is truncated.
3:28
So, I'll concatenate the three dots.
3:32
And, if the body length is
less than 200 characters,
3:36
I'll simply return the full
article with this.body.
3:40
Finally, return the short description
stored in the variable shortDesc.
3:46
You can also copy this method from
the teachers notes with this video and
3:54
learn more about the JavaScript
substring method.
3:58
Next, I'll display the short
description in the index view
4:01
by opening the file views
> articles > index.pug.
4:06
And in type p tag, replace article.body
with a call to article.shortDescription.
4:11
I'll test the short description method,
4:22
by creating a new article titled,
My latest Article, authored by me.
4:26
And I'll paste in body text that's longer
than 200 characters, and click Submit.
4:33
Then click back to the articles listing,
and see that it worked.
4:39
The new article text is shortened,
displaying the ellipses.
4:42
When I click two or more,
I can see the full article.
4:46
In the next video, we'll work on
updating and deleting entries.
4:50
You need to sign up for Treehouse in order to download course files.
Sign up