mercredi 7 octobre 2015

Im trying to understand ember and ember cli conventions and file structure

I have set up a simple api and a new ember app using ember cli

However, while I can get a full list of 'items' to appear, I can't get a single item to work using params.

I have my files set up like the following:

/models
  item.js
/routes
  /items
    index.js
    show.js
/templates
  /items
    index.hbs
    show.hbs
  application.hbs
  index.hbs
  items.hbs
router.js

For reference, here is what I have in the files

I set up my models/item.js a follows:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string')
});

I added my code to my router.js

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

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

Router.map(function() {
  this.route('items', function() {
    this.route('show', { path: '/:item_id' });
  });
});

export default Router;

Then I created my templates/index.hbs

{{outlet}}

And finally, added my templates/items/index.hbs

<ul>
  {{#each model as |item|}}
      <li>
      {{#link-to 'items.show' item}}
        {{item.name}}
      {{/link-to}}
      </li>
  {{/each}}
</ul>

This works as intended.

However, when I click a link (/items/1), it no longer performs as expected. It will show the items/show.hbs correctly assuming I do no use any handlebars variables ({{item.name}}). For example, If I just include text, this is my items/show.hbs it will display the text. When I add in, {{name}} it displays a blank page

Here is my templates/items/show.hbs

{{name}}

and my routes/items/show.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.queryRecord('item', params.item_id);
  }
});

What am I doing wrong?

Thanks in advance!

Aucun commentaire:

Enregistrer un commentaire