Ember.js 2.2-如何从组件更新路径模型？

Question

使用Ember 2.2.0，我有一条路线：

Dash.BacklogReportsRoute = Ember.Route.extend
  model: ->
    @store.queryRecord "report", newest: true

和一个组件：

Dash.BacklogReportComponent = Ember.Component.extend
  report: null
  actions:
    generate: ->
      # Send the request.
      $.ajax
        type: "post",
        url: "/reports/generate/#{new Date().getFullYear()}",
        success: =>
          # Update the model.
          # TODO - how to reload the model in place? Or at least just refresh
          # the Route so we don't have to reload the entire app.
          window.location.reload()

其中包括作为模板的一部分：

<p>
  Report was generated {{report.timestamp}}.
</p>

其中timestamp是报表模型上的计算属性。

---

路由的模型是最新的Report对象，并且通过POST generate操作使服务器创建更新的（因此是较新的）Report。 我想更新该[较新]报告的时间戳。

我的问题是，在Ember 2中，如何使路线刷新？ 我是Ember的新手，所以不确定是否可以从Component内部直接访问Route（或者如果可以的话 ，如果可以的话）。 我认为仅重新加载模型是行不通的，因为在成功执行POST之后， @store.queryRecord "report", newest: true将返回不同的模型（即，具有不同id的记录） @store.queryRecord "report", newest: true与加载页面时为@store.queryRecord "report", newest: true 。 POST之后，现有模型将相同。

另外，我很高兴完全重新渲染Route（这是一个非常简单的页面）或再次转换到“此”页面，但是我不知道该怎么做。

现在，我只是强制使用老式的页面window.location.reload() 。

---

从另一种角度来看，也许有一种更惯用的方法来解决Ember的问题。

我是否应该使用路线加载所有（或某些）报告，并在POST之后强制对该集合进行刷新？ 我看到Enumerable具有.firstObject属性-是一个计算属性（换句话说，如果我的Routes模型是Reports的集合，而我又推到该Collection的前面，该更改会自动通过.firstObject引用传播吗？）

Answer 1

那么您实际上不能直接从组件访问路由。 但这没问题，因为您可以使用动作来达到相同的效果。

因此，首先您需要从您的组件中的generate动作发送一个动作：

Dash.BacklogReportComponent = Ember.Component.extend
  report: null
  actions:
    generate: ->
      # Send the request.
      $.ajax
        type: "post",
        url: "/reports/generate/#{new Date().getFullYear()}",
        success: =>
          @sendAction('didGenerate')

接下来，您需要在模板中挂接操作，以便在调用控制器/路由时得到通知：

{{backlog-report report=report didGenerate='didGenerateReport'}}

现在，您可以在控制器或路由中“捕获”该动作。 我们将在另一条路线中进行操作，以便我们对其进行刷新：

Dash.BacklogReportsRoute = Ember.Route.extend
  actions:
    didGenerateReport: ->
      @refresh()
  model: ->
    @store.queryRecord "report", newest: true

抱歉，如果我在CoffeScript中犯了任何错误（有一段时间没有使用它了）。 另外还有其他可以改进的地方。 通常，我不会将ajax调用放置在组件中，如果可能的话，我会将其放置在控制器/路由中，并通过操作进行调用（我的经验是，最好避免在组件中放置ajax调用，是用例）。

如果您还没有阅读，我通常会建议阅读所有的余烬指南 。 它们非常好，虽然您从一开始就不会理解所有内容，但您至少或多或少会知道要寻找的东西或可能的东西。

Answer 2

如果您需要手动重新加载页面，确实应该有更好的方法。 与其他类似框架一样，Ember是SPA（单页应用程序），当仅高效更新页面的一部分时，它们发挥了神奇作用。

---

他这样说，如果你要访问的router从controller / component被发送到一个动作router和处理，该变化action 。

请参阅冒泡的动作 https://guides.emberjs.com/v1.10.0/templates/actions/