falsandtru/pjax-api

Pjax遷移で遷移先のScriptのみ実行したい

Closed this issue · 4 comments

@falsandtru
初めまして。日本語で失礼します。

一通りPjaxサイトのドキュメントは読ませて頂いたのですが、
表題の件を解決できなかったので質問させていただきます。

下記条件で使用した際に

((window, document) => {
//A画面の処理
    $(document).on('DOMContentLoaded pjax:render', () => {
        $.pjax({
            area: ['#contents'],
            load: {
                head: 'base, meta, link',
                css: true,
                script: true,
            },
            link: 'a[data-pjax]',
        });
    });
})(window, document);

A画面からB画面にPjaxにて遷移した際に上記のA画面の処理も実行してしまします。

((window, document) => {
    //A画面の処理
    //loadで実行
    $(document).on('DOMContentLoaded pjax:load', () => {
        $.pjax({
            area: ['#contents'],
            load: {
                head: 'base, meta, link',
                css: true,
                script: true,
            },
            link: 'a[data-pjax]',
        });
    });
})(window, document);

Eventのハンドリングかなと、pjax:loadと試したのですが、
loadにするとpjaxからの遷移時に遷移先のscriptが実行されませんでした。
pjaxの遷移にて遷移先のScriptのみ実行するにはどのような設定をすればいいでしょうか?

お手数をお掛けしますが、ご教授宜しくお願いします。

JavaScriptの実行状態はpjaxにより遷移した全ページで共有されるためハンドラの変更のような実行状態の変更は自身で管理しなければなりません。
ページ固有の実行スクリプトを設定したい場合は当該ページにインラインスクリプトを埋め込むことで実現できます。

本件の場合、そもそもpjaxの設定は1度実行すれば以降は不要でありページ遷移ごとに再度設定する使用方法は想定していないため避けてください。

ご連絡ありがとうございます。

本件の場合、そもそもpjaxの設定は1度実行すれば以降は不要でありページ遷移ごとに再度設定する使用方法は想定していないため避けてください。

との事ですが、それは A → B → C と同じボタンで遷移した場合、AでPjaxの設定をしていた場合は、
Bでは設定しないと言うことでしょうか?

検証してみようとは思いますが、
その場合、Bに直接飛んで来た人は、Cへの遷移はPjax遷移にならずに、画面遷移になるという認識でよろしいでしょうか?

A → B → C と同じボタンで遷移した場合、AでPjaxの設定をしていた場合は、
Bでは設定しないと言うことでしょうか?

はい。すべてのページで共通の外部スクリプトを参照させこの外部スクリプトでpjaxを設定してください。JavaScriptはSNSボタンのような外部サービスの利用を除き原則としてすべて外部スクリプトに記述すべきものです。
先にブートストラップやボイラープレートのソースを読むなどして一般的なページ構造を学んだほうがよいでしょう。

了解しました。
ご回答ありがとうございました。