Ember 資源和故障排除

• Ember.JS 指南
  • 教程：超級租賃
• Ember.JS API 文件
• Ember.JS Discord 伺服器 — 一個論壇/聊天伺服器，您可以在其中結識 Ember 社群，尋求幫助並幫助他人！

這遠非一個詳盡的列表，但它是在撰寫本文時（最新更新，2020 年 5 月）出現的一些事項的列表。

對於框架特定的事項，可以使用 ember-inspector 外掛，它允許檢查

• 路由和控制器
• 元件
• 服務
• Promise
• 資料（例如，來自遠端 API — 預設情況下來自 ember-data）
• 棄用資訊
• 渲染效能

對於一般的 JavaScript 除錯，請檢視我們的 JavaScript 除錯指南 以及與 瀏覽器其他除錯工具 的互動。在任何預設的 Ember 專案中，將有兩個主要的 JavaScript 檔案，vendor.js 和 {app-name}.js。這兩個檔案都是使用源對映生成的，因此當您開啟 vendor.js 或 {app-name}.js 搜尋相關程式碼時，當設定斷點時，源對映將被載入，並且斷點將放置在預編譯程式碼中，以便更容易地與您的專案程式碼相關聯。

有關源對映、為什麼需要它們以及 ember-cli 如何使用它們，請參閱 高階用法：資產編譯 指南。請注意，源對映預設啟用。

一點也不。雖然 ember-data 解決了任何處理資料的應用程式都會遇到的最常見問題，但可以自己構建前端資料客戶端。一個常見的替代方案是任何功能齊全的前端資料客戶端 Fetch API。

使用框架提供的設計模式，使用 fetch() 的Route 將如下所示

import Route from "@ember/routing/route";

export default class MyRoute extends Route {
  async model() {
    let response = await fetch("some/url/to/json/data");
    let json = await response.json();

    return {
      data: json,
    };
  }
}

有關 在此處指定 Route 的模型 的更多資訊。

這是 Ember 人員從以前有 React 經驗的人那裡聽到的最常見的問題。雖然從技術上講可以使用 JSX 或任何其他形式的 DOM 建立，但還沒有任何東西像 Ember 的模板系統那樣強大。有意為之的極簡主義迫使做出某些決定，並允許更一致的程式碼，同時使模板更具結構性，而不是讓它們充滿定製邏輯。

另請參閱：ReactiveConf 2017：Glimmer VM 的秘密

mut 在本教程中沒有介紹，實際上是從 Ember 從雙向繫結資料轉向更常見且更容易理解的單向繫結資料流的過渡時期遺留下來的包袱。可以將其視為在構建時進行的轉換，它使用 setter 函式包裝其引數。

更具體地說，使用 mut 允許宣告僅模板的設定函式

<Checkbox
  @value={{this.someData}}
  @onToggle={{fn (mut this.someData) (not this.someData)}}
/>

而如果沒有 mut，則需要一個元件類

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class Example extends Component {
  @tracked someData = false;

  @action
  setData(newValue) {
    this.someData = newValue;
  }
}

然後將在模板中這樣呼叫它

<Checkbox @data={{this.someData}} @onChange={{this.setData}} />

由於使用 mut 的簡潔性，可能希望使用它。但是，mut 具有不自然的語義，並且在其存在期間引起了很多混淆。

已經有一些新想法被整合到外掛的形式中，這些外掛使用公共 API，ember-set-helper 和 ember-box。這兩個外掛都試圖透過引入更明顯/“更少魔法”的概念來解決 mut 的問題，避免構建時轉換和隱式 Glimmer VM 行為。

使用 ember-set-helper

<Checkbox @value={{this.someData}} @onToggle={{set this "someData" (not
this.someData)}} />

使用 ember-box

{{#let (box this.someData) as |someData|}}
  <Checkbox
    @value={{unwrap someData}}
    @onToggle={{update someData (not this.someData)}}
  />
{{/let}}

請注意，這些解決方案在社群成員中並不特別常見，總的來說，人們仍在努力為在僅模板的上下文中設定資料找到一個符合人體工程學且簡單的 API，而無需支援 JS。

控制器 是 單例，可以幫助管理活動路由的渲染上下文。從表面上看，它們的功能與元件的後臺 JavaScript 非常相似。控制器（截至 2020 年 1 月）是管理 URL 查詢引數的唯一方法。

理想情況下，控制器的職責應該相當輕，儘可能地委託給元件和服務。

一個 路由 表示使用者在應用程式中從一個地方導航到另一個地方時 URL 的一部分。路由只有幾個職責

• 載入渲染路由（或檢視子樹）所需的最少資料。
• 控制對路由的訪問並在必要時重定向。
• 處理來自最少必要資料的載入和錯誤狀態。

路由只有 3 個生命週期鉤子，所有這些都是可選的

• beforeModel — 控制對路由的訪問。
• model — 載入資料的地方。
• afterModel — 驗證訪問許可權。

最後，路由能夠處理配置 model 導致的常見事件

• loading — 當 model 鉤子正在載入時該做什麼。
• error — 當 model 中丟擲錯誤時該做什麼。

loading 和 error 都可以渲染預設模板以及在應用程式其他地方定義的自定義模板，從而統一載入/錯誤狀態。

有關 路由可以執行的所有操作的更多資訊，請參閱 API 文件。

• 上一個
• 概述：瞭解客戶端 JavaScript 框架
• 下一個