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

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

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

后现有模型将相同

或者，我非常乐意完全重新呈现路线（这是一个非常简单的页面）或再次转换到 "this" 页面，但我不知道该怎么做。

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

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

我是否应该使用路由加载所有（或部分）报告，并在 POST 之后强制刷新该集合？我看到 Enumerable 有一个 .firstObject 属性 - 是一个计算的属性（换句话说，如果我的 Routes 模型是一个报告集合并且我推到前面该集合的变化是否会自动通过 .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/route 在调用时得到通知：

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

现在您可以 "catch" 在您的控制器或路由中执行该操作。我们将在其他路线中完成，以便我们可以刷新它：

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

抱歉，如果我在使用 CoffeScript 时犯了任何错误（有一段时间没有使用它）。还有其他你可以改进的地方。通常我不会将 ajax 调用放在组件中，如果可能的话我会把它放在 controller/route 中并用一个动作调用它（我的经验是最好避免将 ajax 调用组件，尽管它有用例）。

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

Answer 2

如果您需要手动重新加载页面，确实应该有更好的方法。 Ember 因为其他类似的框架是一个 SPA（单页应用程序）并且在仅更新部分页面时非常有效地发挥它们的魔力。

话虽如此，如果您想通过向 router 发送操作并处理其中的更改来从 controller/component 访问 router action.

查看动作冒泡 https://guides.emberjs.com/v1.10.0/templates/actions/

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

Ember.js 2.2 - How to update Route model from a Component?

javascript

routing

refresh

ember.js