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

Ember link-to creats link to undefined

本文关键字：链接 未定义 创建 余烬      更新时间：2023-09-26

我有一个非常简单的示例应用程序，我试图创建一些动态嵌套路由。似乎链接到帮助器在URL中放了'undefined'，而不是对象的id。

这发生在'states'列表(第一个列表，还没有到第二个列表)

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

下面是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版本有同样的"问题"。"issue"在router中，你应该用下划线来命名你的:id，这将解决url中的" undefined "。

例如::state_id and manifest_id

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

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

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

相关文章：