Question

注意：使用Ember Rails 0.18.2和ember-source 1.12.1

我继承了一个具有奇怪功能的Ember应用程序。我是Ember的新手，所以这可能是正常的，但我觉得很奇怪。

有3种型号：

家长
游戏
评论

当家长观看游戏时，网址如下所示：

/<parent slug>/games/<game_id>

（slug只是父母的唯一ID。）

在此网址上有一个包含以下代码的模板：

  {{#unless commentsOpen}}
  {{#link-to 'comments' class="Button easyButton"}}Chat with parents in your pod{{/link-to}}
  {{/unless}}

  {{outlet}}

点击上面的按钮，然后将网址更改为：

/<parent slug>/games/<game_id>/comments

然后所有评论都出现在该游戏中。

我需要从视图中删除该按钮，并为每个游戏自动显示评论。

API是Rails，我可以更改API端点，以便在请求游戏的同时返回所有注释（作为嵌入的对象数组）。

但是我应该用{{outlet}}替换什么？因为我的理解是{{outlet}}由于这条路线而被委托给评论模板：

App.CommentsRoute = Ember.Route.extend
  model: ->
    return this.store.find('comment', {
      game:   @modelFor('game').get('id')
      parent: @modelFor('parent').get('slug')
    }).then( (models) -> models.toArray() )

我相信我需要删除该路线，并将评论作为游戏模型中的嵌入对象。我是否只需用以下内容替换插座：

{{#each comment in Game}}

<div class="commentItem">
  <div class="commentItem-author">{{comment.parent_name}}</div>
  <div class="commentItem-body">{{comment.body}}</div>
</div>

{{each}}

修改

这是路由器：

App.Router.map(function() {
  this.route('index', {
    path: '/'
  });
  return this.resource('parent', {
    path: '/:parent_id'
  }, function() {
    this.resource('games', {
      path: '/games'
    });
    return this.resource('game', {
      path: '/game/:game_id'
    }, function() {
      return this.resource('comments', {
        path: '/comments'
      });
    });
  });
});

Answer 1

让我们说你有你当前的应用程序，大概就是你有一个喜欢的游戏列表：

{{#each games as |game|}}
  <li>
    {{#link-to 'game' game}}
       {{game.title}}
    {{/link-to}}
  </li>
{{/each}}

你应该可以通过更改链接来直接路由到带有评论的游戏，如下所示：

{{#link-to 'games.game.comments' game}}

这是一个带有详细解决方案的twiddle

Answer 2

将评论嵌入游戏中就是答案。然后视图是这样的：

{{#each comment in model.comments}}

<div class="commentItem">
    <div class="commentItem-author">{{comment.parent_name}}</div>
    <div class="commentItem-body">{{comment.body}}</div>
</div>

{{/each}}

EmberJS - 如何重组嵌入式模型？

2 个答案: