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之后，id将返回一个不同的模型（即具有不同@store.queryRecord "report", newest: true的记录），而不是页面已加载。现有模型在POST之后将是相同的。

或者，我非常高兴完全重新阅读路线（这是一个非常简单的页面）或过渡到＆＃34;这个＆＃34;再次页面，但我无法弄清楚如何做到这一点。

现在我只是强迫一个老派的页面window.location.reload()。

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

我是否应该使用路由加载所有（或部分）报告，并在POST之后强制刷新该集合？我看到Enumerable有一个.firstObject属性 - 是一个计算属性（换句话说，如果我的路由模型是一个报告集合，我推到该集合的前面，那会改变传播通过.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调用，尽管那里是它的用例。）

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

Answer 2

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

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

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

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

2 个答案: