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/