Simple relationship fixtures in nested route and controller doesn't work

1

Ok, so I have spent a long time on this, trying to understand, and I know this is simple, but it is not working and I don’t know why.

Here is my index.html:

    <head>
    <meta charset="utf-8">
    <title>Plotlets - Ember Edition</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

      <script type="text/x-handlebars">
        <div class="navbar">
              <div class="navbar-inner">
                <a class="brand" href="#">Plotlets</a>
                <ul class="nav">
                  <li>{{#linkTo 'plots'}}Plots{{/linkTo}}</li>
                </ul>
              </div>
            </div>
        {{outlet}}
      </script>

      <script type="text/x-handlebars" id="plots">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span3">
                {{#each model}}
                  {{#linkTo 'plot' this}}{{title}}{{/linkTo}}<br />
                {{/each}}
            </div>
            <div class="span9">
              {{outlet}}
            </div>
          </div>
        </div>
      </script>

      <script type="text/x-handlebars" id="plot">
        <h3>{{title}}</h3>
        {{outlet}}
      </script>

      <script type="text/x-handlebars" id="cards">
      {{model}}
          {{content}} col: {{col}} row: {{row}}
      </script>



      <script src="js/libs/jquery-1.9.1.js"></script>
      <script src="js/libs/handlebars-1.0.0-rc.4.js"></script>
      <script src="js/libs/ember-1.0.0-rc.5.js"></script>
      <script src="js/libs/ember-data-master.js"></script>
      <script src="js/libs/moment.js"></script>
      <script src="js/libs/showdown.js"></script>
      <script src="js/app.js"></script>

    </body>

And here is the app.js:

    // app
    App = Ember.Application.create();

    // router
    App.Router.map(function() {
      // put your routes here
      this.resource('login');
      this.resource('logout');
      this.resource('signup');
      this.resource('plots',function(){
        this.resource('plot',{path: ':plot_id'},function(){
          this.resource('cards');
        });
      });
    });

    // routes (map model to route)
    App.PlotsRoute = Ember.Route.extend({
      model: function(){
        return App.Plot.find();
      }
    });

    App.CardsRoute = Ember.Route.extend({
      model: function(){
        return App.Card.find();
      }
    });

    // controllers


    // store
    App.Store = DS.Store.extend({
      revision: 12,
      adapter: 'DS.FixtureAdapter'
    });

    var attr = DS.attr;

    // models
    App.Plot = DS.Model.extend({
      cards: DS.hasMany('App.Card'),
      title: attr('string'),
      desc: attr('string')
    });

    App.Card = DS.Model.extend({
      plot: DS.belongsTo('App.Plot'),
      content: attr('string'),
      col: attr('number'),
      row: attr('number')
    });

    // fixtures
    App.Plot.FIXTURES = [
      {id: 1, title: 'Snora and the Cruel Complications', desc: 'Snora Book 1'},
      {id: 2, title: 'Snora and the Deviant Septum', desc: 'Snora Book 2'}
    ];

    App.Card.FIXTURES = [
      {id: 1, plot_id: 1, content: "Twas the night before Xmas,", col: 0, row: 0},
      {id: 1, plot_id: 1, content: "and all through the house,", col: 0, row: 1},
      {id: 1, plot_id: 1, content: "not a creature was stirring,", col: 0, row: 2},
      {id: 1, plot_id: 1, content: "not even a mouse.", col: 0, row: 3}
    ];

I can’t get the cards to show up on the page for anything, and I don’t know why. I have read every page of the docs, tried every bit of code I could find and searched the API, and it seems like cards should work just like the plots section, the only difference is the relationship I think. What am I doing wrong?

2

The cards route is never being invoked. Maybe you don’t need that route at all. You should get some content, if you plot template replaced the {{outlet}} with the cards. Like this:

<h3>{{title}}</h3>
{{#each cards}}
  <div>{{content}}</div>
{{/each}}

Remember to setup a JSBin instead of pasting 100 lines of code :slight_smile:

3

Thanks, this sheds some light on things, but putting cards in the plot template still gives me {{cards.length}} is 0 and nothing shows up. Outputting {{cards}} in the plot template gives me this: DS.ManyArray:ember335 so it seems to be the correct object, but nothing in it? Sorry, still confused.

4

Y U NO JSBin? :slight_smile:

Best guess is that you need to declare the cards relationship:

App.Plot.FIXTURES = [
      {id: 1, title: 'Snora and the Cruel Complications', desc: 'Snora Book 1', cards: [1, 2]},
      {id: 2, title: 'Snora and the Deviant Septum', desc: 'Snora Book 2'}
    ];

All your cards also have an id of 1.

5

Do my card fixtures need to have plot_id in them?

6

I’m not an Ember Data expert. But I believe that you need to specify both sides of the relationship, i.e. set cards in App.Plot.FIXTUREs, and set plot (I think it’s supposed to be plot, but it might be plot_id) in App.Card.FIXTURES.