Pjax 高階用法

Yii Framework 2.0 內建了對 Pjax 的支援， Pjax是一個減少頁面載入時間的 JavaScript 庫。它通過僅更新通過 Ajax 更改的頁面部分來實現這一點，如果你的頁面上有許多其他資源，這可以節省大量成本。我們的一些專案使用此功能，我們希望分享一些經驗教訓。

問題 ：第 1 頁是一個包含很少元素的簡單靜態頁面。第 2 頁包含 ActiveForm 以及其他小部件。需要載入 ActiveForm JavaScript 資源才能執行內聯 JavaScript，但由於第 1 頁不包含這些資產，因此在嘗試執行 activeform 行時會遇到 JavaScript 錯誤：‘Uncaught TypeError：undefined 不是功能’。

解決方案 ：將 ActiveForm 資產包含在將跨所有頁面載入的共享資產包中，確保任何條目頁面都允許正確的指令碼可用。

class AppAsset extends AssetBundle
{
    ...
    public $depends = [
        'yii\widgets\ActiveFormAsset',
        'yii\validators\ValidationAsset',
    ];
    ...
}

問題 ：在上面的相同示例中，第 1 頁包含一些小部件（NavBar 等）。第 2 頁包含相同的小部件加上一些小部件（ActiveForm 等）。通過 Pjax 載入頁面時，一些自定義內聯 JavaScript 正在執行，但 ActiveForm 小部件放置的內聯指令碼似乎不起作用，因為驗證程式碼不起作用。在除錯中，我們發現 ActiveForm init 函式正在執行，但’this’變數似乎與 ActiveForm 不對應。它實際上對應於 NavBar div。調查 div ID，我們看到 ActiveForm 期望 ID 為#w1，但是 NavBar 已經在 Page 1 上分配了該 ID，因為那是該頁面上遇到的第一個小部件。

解決方案 ：不要依賴 Yii 為你自動生成小部件 ID。相反，在建立視窗小部件時始終傳入 ID 以保持對這些 ID 的控制。

問題 ：Pjax 請求在請求啟動後的 1000 毫秒內被取消。

解決方案 ：增加 Pjax 超時設定。預設為 1 秒，這對於生產站點是可接受的。但是，在開發過程中，使用 xdebug 時，我們的頁面載入時間通常超過此限制。

問題 ：Web 應用程式實現 Post-Redirect-Get(PRG) 模式。Pjax 重新載入整個頁面而不僅僅是重定向。

解決方案 ：這是 Pjax 的預期行為。使用 Pjax 時，重定向不起作用，因此你可以確定請求是否為 Pjax，如果是，則呈現內容而不是重定向。示例可能如下所示：

$endURL = "main/endpoint";
if (Yii::$app->request->isPjax) {
    return $this->run($endURL);
} else {
    return $this->redirect([$endURL]);
}

你對 Pjax 和 Yii 的經歷是什麼？如果你發現任何陷阱或有比我們更好的解決方案，請在下方評論！