EmberJS - 如何重构嵌入式模型？答案

【问题标题】：EmberJS - how to restructure embedded models?EmberJS - 如何重构嵌入式模型？
【发布时间】：2016-08-23 03:27:45
【问题描述】：

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

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

有 3 种型号：

父母
游戏
评论

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

/<parent slug>/games/<game_id>

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

在这个 url 有一个包含这个代码的模板：

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

  {{outlet}}

单击上面的按钮，然后将 url 更改为：

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

然后所有 cmets 都会出现在该游戏中。

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

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

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

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() )

我认为我需要删除该路由并将 Comments 设置为 Game 模型中的嵌入对象。然后我是否只需将插座替换为：

{{#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'
      });
    });
  });
});

【问题讨论】：

您的问题是关于模型的重组，还是更多关于如何在路由结构和涉及的模板方面以不同方式加载该模型？
有关如何更改模板和路由结构以加载当前模型的更多信息，因为我不认为模型需要更改（尽管我认为我可能错了）。

标签： ruby-on-rails ember.js ember.js-view

【解决方案1】：

假设您有当前的应用程序，并且大概在某个地方您有一个喜欢的游戏列表：

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

您应该可以通过更改链接直接使用 cmets 路由到游戏，如下所示：

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

这里是twiddle 有详细的解决方案

【讨论】：

谢谢，尝试过并收到此错误：断言失败：链接到路由“games.game.cmets”的尝试失败。路由器在其可能的路由中未找到“games.game.cmets”
我尝试按如下方式添加该路由： App.GameRoute = Ember.Route.extend({ model: function() { return this.modelFor('games.game').cmets; } }) ;
啊，是的，现在您已经添加了路由器，我看到您正在使用 this.resource。当您的路线设置为这样时，使用我建议的链接将不起作用。

【解决方案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}}

【讨论】：