Join Justin Yost for an in-depth discussion in this video Add a link, part of Ember.js Essential Training.
- [Instructor] Now that we are displaying our list of bookmarks, we should add a link that links from the title to the exact page for our bookmark. Open up the template for the about page at: App, templates, about.hbx. And next, we need to add an A tag for our link. So our code will have an A tag, surrounding the title for the bookmark. So we'll add, after line three, we'll add a new line, and we'll add an A tag.
And we'll add an href property. Which is going to be equal to using the double curly quotes syntax. Bookmark.link. This says to set our href property to the bookmark link property. Next, we need to close our A tag. So after the bookmark about, we'll add a new line. And we'll close it, using the closing A tag. Now let's see how this worked. Go to our terminal and recall now how to restart our Ember server.
We run the command: ember S, or ember server. Now we can navigate to our browser. And we can refresh the page, and we now have links on our About page. Although, if we click on one, it doesn't actually open in a new tab. Let's add that feature now by going back to our editor, and in the A tag, we want to add a new property to set the target equal to: _blank, which will open it in a new tab.
So we'll add target is equal to: _blank. So normally, at this point, we would have needed to restart our Ember server. Well, do we actually need to do that? Let's take a guess. Let's go back to our browser and if we click on one of the links, we'll see that it already opened in a new tab. This is one of the many great features of using Ember. We don't have to restart our server, or we have to refresh our page. Our page just automatically gets new features and new things that we write in our code for free, without us having to do any work.
- Why choose Ember?
- Installing Ember.js and Ember Inspector
- Defining the model
- Creating nested and dynamic routes
- Loading templates with routes
- Rendering different templates
- Displaying collections
- Working with Ember components
- Building forms
- Creating, editing, and deleting records
- Configuring Ember.js applications
- Testing your Ember application
- Installing add-ins
- Upgrading an Ember application
Skill Level Intermediate
1. Ember.js Basics
2. Getting Started with Ember.js
3. Our First Ember.js Application
4. Ember.js Routes
5. Ember.js Models
6. Ember.js Templates
7. Ember.js Components
9. Application Configuration
Build an app for production3m 29s
11. The Ember.js Community
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.