javascript - 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 是报表模型上的计算属性。

<小时/>

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

我的问题是，在 Ember 2 中，如何使路由自行刷新？我是 Ember 新手，所以我不确定是否可以直接从内部访问路由一个组件(或者如果我可以，如果这是一个好主意)。我认为仅重新加载模型是行不通的，因为在成功 POST 后， 将返回不同的模型(即具有不同 id 的记录) @store.queryRecord“report”，最新:true 比页面加载时的情况。 POST 之后现有模型将相同。

或者，我会非常高兴完全重新渲染路线(这是一个非常简单的页面)或再次转换到“此”页面，但我不知道该怎么做。

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

<小时/>

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

我是否应该使用路由加载所有(或部分)报告，并在POST之后强制刷新该集合？我看到 Enumerable 有一个 .firstObject 属性 - 是一个计算属性(换句话说，如果我的路由模型是一个报告集合，并且我将其推到了前面该 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')

接下来，您需要在模板中连接操作，以便您的 Controller /路由在调用时收到通知:

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

现在您可以在 Controller 或 route “捕获”该操作。我们将在 route 执行此操作，以便我们可以刷新它:

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

抱歉，如果我在使用 CoffeScript 时犯了任何错误(有一段时间没有使用它)。还有其他一些事情你可以改进。一般来说，我不会将 ajax 调用放在组件中，如果可能的话，我会将其放在 Controller /路由中，并通过操作调用它(我只是有经验，最好避免将 ajax 调用放在组件中，尽管有是它的用例)。

我通常建议阅读所有 ember guides如果您还没有这样做。它们非常好，虽然你不会从第一次阅读就理解所有内容，但你至少或多或少会知道要寻找什么，或者什么是可能的。