4

私はjQueryMobileでいくつかのテストを行っており、アプリケーションとそのさまざまなページをセットアップする方法を理解しようとしています。理想的には、フレームワークでトランジション付きのページをロードしながら、各ページを明確に分離したままにしておきたいと思います。特に、Ajaxを介してロードされたページは、前のページのJavaScriptまたはCSSを「クリア」していないようです。

例1-JavaScript

たとえば、私がこのようなものを持っている場合page1.html：

<script>
    setInterval(function() {
        console.info('Interval' + (new Date()));
    }, 1000);
</script>

次に、をロードpage2.htmlすると、間隔はまだ実行されています。に戻るとpage1、新しい間隔が開始されるため、に戻るたびに2つの間隔が実行され、3と4などが実行されpage1ます。

例2-CSS

もう1つの問題はスタイリングです。2つの異なるページで独立して作業している2人の開発者が要素を作成するとしますmy-element。ではpage1、この要素のスタイルは次のとおりです。

<style>
    #my-element {
        color: red;
    }
</style>

<span id="my-element">This one is red</span>

ではpage2、要素はスタイル設定されていません。

<span id="my-element">This one has no style</span>

繰り返しになりますが、page1.html最初に行ってからに行くとpage2.html、でmy-elementスタイル設定されていなくても、赤になってしまいますpage2.html。

だから私は2つの質問があると思います：

  1. 現在、ページをロードするためのjQueryMobileのアプローチはまったくスケーラブルではないようです。CSS、JSは1つのページで作成され、次のページに進みます。それで、jQueryMobileがページを「きれいに」ロードするようにする方法はありますか。つまり、JSまたはCSSの一部が次のページに影響を与えないように、前のページからすべてを完全に削除しますか？

  2. そうでない場合、jQuery Mobileでスケーラブルな方法で複数のページを操作する正しい方法は何ですか？

4

1 に答える 1

3

あなたが説明している動作がJQMを機能させるものです。通常のページ ロード (ajax なし) を実行する 'data-ajax=false' または 'rel=external' を使用してページをロードするまで、DOM は保持されます (ロードする最初のページの js および css を含む)。

ajax 経由でページをロードすると、ほとんどの場合、DOM に少なくとも 2 つのページが作成されます。開始したページ (アンカー ページなど) と、ajax 経由でロードしている他のページ (次のページがロードされると削除されます)。 

このアプローチにより、ページ間で共有できるトランジションやその他の機能を使用できます。

それでも、js/css を使用して特定のページを簡単にターゲットにすることができます。私は常にアプリケーションで controller.js ファイルを実行しています。これは、JQM イベント (pagebeforeshow、pageshow...) のいずれかにバインドすることによってページ固有のものを処理します。同様に、ページ固有の CSS の場合は、page id 属性を使用して CSS ページ固有のものにします。

于 2012-11-04T07:40:20.437 に答える