CODEWITHSUNDEEP
javascriptember.js
Scot
Scot

Reputation: 582

Ember link-to creats link to undefined

I have a very simple sample app where I'm trying to create some dynamic nested routes. It seems that the link-to helper is putting 'undefined' in the URL instead of the id of the object.

This is occurring with the 'states' list (the first list, haven't gotten to the second yet)

The similar questions I've found on SO don't seem to address this issue for me.

Here is the js:

App = Ember.Application.create();

App.Router.map(function() {
    this.resource('states', function () {
        this.resource('state', {path: '/:stateId'}, function () {
            this.resource('manifests', function () {
                this.resource('manifest', {path: '/:manifestId'});
            })
        });
    });
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.StatesRoute = Ember.Route.extend({
    model: function () {
        return [{
            id: 1,
            stateName: 'Tennessee'
        }, {
            id: 2,
            stateName: 'Michigan'
        }, {
            id: 3,
            stateName: 'Texas'
        }];
    }
});

App.StateRoute = Ember.Route.extend({


    model: function (params) {
        console.dir(params);

        return [{
            manifestId: 1,
            manifestName: 'Manifest 1'
        }, {
            manifestId: 2,
            manifestName: 'Manifest 2'
        }, {
            manifestId: 3,
            manifestName: 'Manifest 3'
        }];
    }
});

App.ManifestsRoute = Ember.Route.extend({
    model: function (params) {
        console.dir(params);
    }
});

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="states">
      <ul>
          {{#each}}
              <li>{{#link-to 'state' this}}{{this.stateName}}{{/link-to}} </li>
          {{/each}}
      </ul>

      {{outlet}}
  </script>

  <script type="text/x-handlebars" id="state">
      <ul>
          {{#each man in .}}
              <li>{{#link-to 'manifest' man}}{{man.manifestName}}{{/link-to}}</li>
          {{/each}}
      </ul>
  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.5.1.js"></script>
  <script src="js/app.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>
</html>

Upvotes: 0

Views: 1089

Answers (2)

dolcalmi
dolcalmi

Reputation: 806

I know is an old post but actual ember version has the same "problem". The "issue" is in router, you should name your :ids with underscore case and this will solve the 'undefined' in url.

Eg: :state_id and manifest_id

hope this help.

Upvotes: 4

ppcano
ppcano

Reputation: 2861

You need to pass a ember model or uses the id. When using plain object, ember doesn't know which is your primary key to build your URL.

{{#link-to 'state' id}}{{stateName}}{{/link-to}}

Then, you could read the param in your StateRoute as params.stateId.

Upvotes: 4

Related Questions