Working with HTML links inside templates

One of the most useful helpers that Ember.js provides is the link-to helper. We'll discuss how to use this helpful feature in this recipe.

How to do it...

The link-to helper is used to navigate an Ember application. The first argument is always the name of the route. The second is the dynamic segment. We'll discuss dynamic segments a little later.

One of the simplest ways to use the link-to helper is to use it inline.

  1. Create a new student application and route. Run this command in the root of the project directory:
    $ ember g route students

    Ember CLI will generate a new route called students. This will update the router.js file as well as add the template and route files.

  2. Open the students.hbs file in the app/templates folder and add this string to it:
    // app/templates/students.hbs
Hi from the students route
{{outlet}}

    This message will be displayed after navigating to the students route.

  3. Open the application.hbs file. Let's add a link-to helper:
    // app/templates/application.hbs
{{#link-to 'students'}}Students{{/link-to}}<br>
{{outlet}}

    The link-to helper's first argument is students. This is the students route that we created earlier. This will render an HTML hyperlink with the name of Students linked to the students route. The {{outlet}} tells the Handlebars templating library where to render the output of the route.

  4. The output of link-to will show an HTML link. When this is clicked, the link will display the students route message that we created earlier in the students.hbs file. This is rendered by {{outlet}}:
    Students
Hi from the students route

    Students is a hyperlink to the route, /students.

    Ember.js is smart enough to remember the history of a link after it's clicked. Therefore, if by chance a user clicks back on the web browser, it will return to the previous route.

  5. You can override this behavior, if needed, by adding the replace=true option to the link-to helper:
    // app/templates/application.hbs
{{#link-to 'students' replace=true}}Students{{/link-to}}<br>
{{outlet}}

    Tip

    Adding data attributes to view helpers

    Unfortunately, data view helpers such as link-to and input don't allow custom data attributes. In other words, if you're using link-to, you can't add data-toggle='dropdown' to the end of the link-to helper. Normal attributes such as class will work, however.

    One way to add custom attributes is to reopen Ember.LinkComponent for link-to or Ember.TextField for the input helper. Reopening a class was discussed in Chapter 2, The Ember.Object Model, so check there first. After reopening the class, you can add an attributeBindings property array. Each element in the array is a data attribute that you want available to your link-to or input helper. For example, to add data-toggle as an attribute to your link-to helper, it would look like attributeBindings: ['data-toggle']. We'll discuss more about input helpers in the next section.

    Alternatively, you can create a component that extends from LinkComponent instead of the normal simple component. You can then add attributes to it. Make sure to name it something other than link-to.

Using link-to helpers with dynamic segments

Link-to helpers can be used to link dynamic segments. The dynamic segment is added to the second argument in the link-to helper. In this recipe, we'll create a students route with a dynamic segment.

  1. Run this command from the project root to create resource for students:
    $ ember g resource students

    This will create the model, route, and templates needed for our new students route.

  2. Next, we'll need to update the router.js file and add a simple dynamic segment:
    // app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('students',{path: '/students/:student_id'});
});

export default Router;

    The most important thing to realize here is the path. This is called a dynamic segment and is represented by :student_id. By convention, the students route will retrieve information from the student model. If the user navigates to /students/5, the route will retrieve the student model with the ID of 5. Look for more information on dynamic segments and routes in the Chapter 4, Ember Router.

  3. Create a new application.js file in the app/routes folder. For the sake of simplicity, we'll have the application route return an array of student objects that we can then retrieve in our template:
    // app/routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return [{id: 1,name: 'Erik Hanchett', age: 16, location: 'Reno'},{id: 2,name: 'Jeff Smith', age: 17, location: 'San Francisco'},{id: 3,name: 'Kate Smith',age: 19, location: 'Sparks'}];
  }
});

    The application route is on top and is inherited by all other routes. For this example, we returned a list of objects with a number of properties. This model will be able to be accessed in our students template.

  4. Update the students template in the app/templates folder:
    // app/templates/students.hbs
Student Route<br>
{{model.name}}<br>
{{model.age}}<br>
{{model.location}}<br>

    This template will display name, age, and location of the model passed to it. Make sure to prefix all the values with model.

  5. We'll then update the application.hbs file with a {{each}} helper and link-to:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2><br>
<br>
{{#each model as |student|}}
  {{#link-to 'students' student}}{{student.name}}{{/link-to}} <br>
{{/each}}
{{outlet}}
<br>
<br>

    In this example, we have an each helper that iterates through the model. The link-to helper has two arguments. The first is the route, which is students. The second is the dynamic segment, student. Ember will replace each segment with the value of the corresponding object ID's property. If, for some reason, no model exists, you can explicitly set the value instead:

    {{#link-to 'students' 1}}Some Student{{/link-to}}

    This will link the student's route with a dynamic segment with an ID of 1.

    Tip

    Multiple segments

    There might be times where you have nested routes with multiple segments. For example, a blog might have blog posts and each blog post might have comments. In this case, you can specify multiple segments in the link-to helper. All you need to do is separate them with a space. For instance, a blog with multiple comments might look like {{#link-to 'blog.comment' 1 comment}}Comment{{/link-to}}. The 1 is the first dynamic segment and the comment is the second dynamic segment.

  6. After being rendered, three links will be displayed as follows:
    <a href="/students/1">Erik Hanchett</a>
<a href="/students/2">Jeff Smith</a>
<a href="/students/3">Kate Smith</a>
  7. Clicking on any link will navigate to the student's route with that ID. The template will then display the student's information on the screen as follows:
    Using link-to helpers with dynamic segments

How it works...

The link-to helper is used by the templating engine to route a customer throughout an application. It's only used for internal links, not external.

The link-to helper takes two or more arguments. The first is the name of the route. The second is used for dynamic segments.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset