Javascript 余烬链接到创建链接到未定义_Javascript_Ember.js

Javascript 余烬链接到创建链接到未定义

javascript ember.js

Javascript 余烬链接到创建链接到未定义,javascript,ember.js,Javascript,Ember.js,我有一个非常简单的示例应用程序，尝试创建一些动态嵌套路由。似乎指向帮助器的链接将“未定义”放在URL中，而不是对象的id中这在“状态”列表中发生（第一个列表，还没有到第二个列表）我在上发现的类似问题似乎没有为我解决这个问题以下是js： App = Ember.Application.create(); App.Router.map(function() { this.resource('states', function () { this.resource('s

我有一个非常简单的示例应用程序，尝试创建一些动态嵌套路由。似乎指向帮助器的链接将“未定义”放在URL中，而不是对象的id中

这在“状态”列表中发生（第一个列表，还没有到第二个列表）

我在上发现的类似问题似乎没有为我解决这个问题

以下是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);
    }
});

以下是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>


余烬起动器套件
欢迎来到Ember.js
{{outlet}}

{{{#各}
{{{#链接到'state'this}{{this.stateName}{{{/link to}}
{{/每个}}

{{outlet}}

{{{#每个人都在.}
{{{#链接到'manifest'man}{{man.manifestName}{{/link到}}
{{/每个}}

您需要传递一个ember模型或使用id。使用普通对象时，ember不知道哪个是构建URL的主键

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

然后，您可以将StateRoute中的参数读取为params.stateId。

我知道这是一篇旧文章，但实际的ember版本也有相同的“问题”。“问题”在路由器中，您应该使用下划线大小写命名您的：id，这将解决url中的“未定义”问题

例如：状态id和清单id

希望这有帮助。

我以为它在寻找一个名为“id”的属性，如果它是一个普通对象的话。《ember.js指南》让人觉得这是可行的：。导游错了吗？这救了我一命；-）