CODEWITHSUNDEEP
ember.js
r0uder
r0uder

Reputation: 25

Linking in EmberJS

I have a Rails API and EmberCLI frontend app. My page shows a list of artists. Click on artist should send user on page with all albums of the artist. I need to make a link to user's albums page. Each artist has his own page with albums. Like localhost:4200/artists/1. Here's what I have:

My router:

import Ember from 'ember';
import config from './config/environment';

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

Router.map(function() {
  this.route('artists');
  this.route('artist', { path: 'artist/:artist_id' });
});


export default Router;

model Artist:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  itunes_id: DS.attr('number'),
  albums: DS.hasMany('album')

});

model Album:

import Model from 'ember-data/model';
import DS from 'ember-data';

export default Model.extend({
  name: DS.attr('string'),
  artwork_url_100: DS.attr('string'),
  artist_id: DS.attr('number'),
  artist: DS.belongsTo('artist')

});

Routes: 1)artist.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('artist')
    return this.store.findRecord('artist', params.artist_id);}
    });

2) album.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  return this.store.findAll('album');}
});

Upvotes: 0

Views: 32

Answers (1)

locks
locks

Reputation: 6577

Like @timmy-omahony mentioned, there's a whole guide about linking in the documentation. You need to use the link-to helper, and pass it the appropriate configurations:

{{#link-to 'artist' 1}}Artist page{{/link-to}}

In this example I used what is called the block form of the link-to helper. The content between the handlebars tag will be the content inside the link anchor. I'm telling it to link to the artist page for the artist with id 1.

You can also pass the value dynamically:

{{#link-to 'artist' artist.id}}Artist page{{/link-to}}

Or you can pass the artist object itself, the model hook will be skipped, and by default the id will be serialized to the URL:

{{#link-to 'artist' artist.id}}Artist page{{/link-to}}

Upvotes: 2

Related Questions