Question

我有一个非常简单的示例应用程序，我试图创建一些动态嵌套路由。似乎链接到帮助者正在放置未定义的＆＃39;在URL而不是对象的id。

这种情况发生在＆＃39;状态＆＃39;列表（第一个列表，尚未获得第二个列表）

我在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>

Answer 1

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

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

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

Answer 2

我知道这是一个老帖子，但实际的ember版本有同样的“问题”。 “问题”在路由器中，你应该用下划线表示你的：ids，这将解决网址中的“未定义”。

例如:: state_id和manifest_id

希望这有帮助。

Ember链接 - 创建未定义的链接

2 个答案: