問題タブ [singlepage]

私は単一ページのサイトを持っています:

http://chiaroscuro.telegraphbranding.com/

各セクションは、ユーザーのウィンドウに基づいて動的にサイズ変更されます。リンクがクリックされたときにjQueryのスムーズスクロール機能を各セクションの一番上までスクロールさせる方法を理解しようとしています。最初のセクションである資金調達エリアでは単純な offset().top を使用しただけでうまく機能していますが、ウィンドウのサイズが常に異なるため、スクロールする距離がわからないため、他のセクションは機能していません。

offset() または position() を機能させようとしましたが、サイコロはありません。アドバイスをいただければ幸いです。

これが私のjQueryです：

`

`

私の意見では、優れた単一ページの Web アプリケーションは、ユーザーのアクションごとにページ全体を (再) ロードする従来の Web アプリケーションにできるだけ近い (そして賢明な) ものでなければなりません。特に、単一ページの Web アプリケーションは、戻るボタンと進むボタンを含むブラウザーの履歴をサポートする必要があります。

単一ページ Web アプリケーションのほとんどのフレームワークは、ブラウザー履歴をサポートしています。しかし、それらは 1 つの重要なことをエミュレートしていないようです: たとえば、従来の Web アプリケーションのページ 1 でフォーム フィールドに入力し、アプリケーションのページ 2 に移動して [戻る] ボタンをクリックすると、ブラウザは入力を復元します。

単一ページの Web アプリケーションでは、通常、次の 2 つのいずれかが発生します。ページ 1 のフォーム フィールドがページ 2 の DOM の一部 (ただし非表示) (または少なくとも Javascript データ構造の一部) であるため、または、ページ 1 にアクセスするたびにフォーム フィールドが新しく作成されます (直接のナビゲーションまたは [戻る] ボタンを押す)。後者の場合、以前の入力は復元されません。

前者の方が優れていることは明らかです。しかし、このソリューションも完璧ではありません。従来の Web アプリケーションでは、履歴に前述のページ 1 が複数回含まれていても、各履歴エントリにはフォーム フィールドの独自のキャッシュ値があります。ただし、すべてのアプリケーション内ナビゲーションでフォーム フィールドを再作成しない単一ページ アプリケーションは、すべてのフォーム フィールドに対して 1 つの値のみをキャッシュします。

この問題を解決し、単一ページ Web アプリケーションをより良くするための 1 つのアイデアは、フォーム フィールドの値をHTML5 履歴インターフェイスの pushState メソッドと replaceState メソッドのdata属性に保存して、他の履歴情報と一緒に保存することです。もちろん、ユーザーが移動する前に現在の履歴エントリを更新しておく必要があるため、replaceState を使用して現在の履歴エントリを更新するすべてのフォーム コントロールでonchange -event ハンドラを使用する必要があります。

ここで私の質問は、上記の問題に対するより良い解決策があるかどうか、およびそれを処理する単一ページの Web アプリケーション フレームワーク/ライブラリがあるかどうかです。

私が理解していることから、ロードされる依存関係を管理する AMD を使用する利点の 1 つですが、require.js を使用する単一ページ アプリケーションでは、すべての依存関係がロードされます。

たとえば、バックボーンなどを使用して、次のファイルがあるとしましょう

main.js には router.js が必要です
router.js には view_a.js と view_b.js が必要です

router.js はビューをレンダリングします

example.com/#view_bここで、 のコードのみが必要で、 のコードはview_b.js何も使用しないに行くとしましょうview_a.js。view_b.jsとにかくrequire.jsなどを使用し てロードするか、ロードを優先する方法はありますか?

最終的には自分のシングルページのワードプレステーマを開発したいので、これがどのように行われるのか興味があります。

すべてが1つのページにあるが、下にスクロールするだけのテーマを見てきました。新しいメニュー項目（またはページ）を追加すると、ページに新しいcssセクションが追加されます。このテンプレートデモで例を見ることができます：Wordpress In-Motionテーマご覧のとおり、メニューリンクをクリックすると、そのセクションに移動します。cssに#newsまたは＃about-usを追加します

ワードプレスのテーマをデザインするときに、これが関数としてどのように作成されるかを誰かに説明してもらえますか？サム

JohnPapaのCodeCamperプロジェクトに新しいビューを追加しようとしています。私は単純なハッシュナビゲーションバインディングで立ち往生しています。私の質問は、{href：favorites}に入力するコードをどのように見つけるかです。ハッシュタグ＃/ favoritesが入力されますが、どこで発生するのかわかりません。30を超えるJSファイルがあり、「お気に入り」を検索すると結果が多すぎます。「お気に入り」を見つけたすべての場所にnewviewコードを追加しようとしましたが、うまくいきませんでした。エラーが発生します：

メッセージ：ReferenceError：newviewが定義されていません。バインディング値：attr：{href：newview}

では、以下のコードで{href：favorites}に何が入力されているかをどのように判断できますか？ノックアウトバインディングがどのように機能するかは知っていますが、プロジェクトでコードを見つけることができません。JohnPapaのCodeCamperプロジェクトとこの特定のコードは別として、一般に、バインディングがノックアウトjsのどこにあるかを知ることができるツールはありますか？

編集：この場合、私はバインディングを見つけました。Webページがキャッシュにスタックしているため、機能しないと思いました。それでも、どのコードがプロパティにバインドされているかを識別するためのツールまたはメソッドがある場合は、それについて知りたいと思います。

私は Marionette と jQuery Mobile を使用して単一ページのアプリを構築しています。ページのさまざまな部分は、Web SQL からのデータで満たされたテンプレートから作成されます。

JQMのドキュメントで、JQMに動的に作成されたページを強制的に強化するには、トリガー（「作成」）を使用する必要があることを読みました。例は、次のように新しいマークアップを挿入するとすぐにトリガーを呼び出す必要があることを示しています。

私の場合、マークアップは Marionette によって挿入されます (つまり、Collection View は関連付けられたモデルをループし、毎回適切なテンプレートを適用します。つまり、ここに問題があります。どのイベントで trigger('create') をバインドする必要がありますか?ダイナミック マークアップを強化して表示しますか?

私は、ajax を介してさまざまなページのコンテンツを (事前に) ロードする単一ページ アプリケーションを構築しています。ユーザーがナビゲートすると、アプリは特定のタグ内の古いコンテンツを新しいコンテンツ (ajax データ) に置き換えます。この新しいコンテンツは、テキストと画像を含む記事などです。

私の質問は:コンテンツを置き換えた後に発生するイベントはありますか?新しいコンテンツのすべての外部リソースが読み込まれますか? DOM のリフレッシュのための「dom ready」のようなものですか?

以下を実装する方法について、いくつかの提案を探しています。現時点では、私は1つのソリューション（モジュール）とはまったく結婚していません。そうは言っても、私はほぼ確実にとを使用Views / Chaos ToolsしStateHandler / History.jsます。私はPanelsまたはを使用することにオープンBlocksであり、実際にはパネルを使用したいと思っています。どんな助けでも大歓迎です！

たった1ページで、AJAXビューの上のページにノードコンテンツを動的に（を使用して）ロードするサイトを作成する必要があります。コンテンツはノードからもアクセス可能である必要がありURLs (node/1)、ビューポートにノードコンテンツ「front-and-center」を含むサイトページ全体をロードします。

明確にできるかどうか教えてください、そして事前に感謝します！

単一ページの JavaScript を使用した Web サイトを構築しています。ホームページのjsonオブジェクトとしてphpを使用してエコーされたすべてのページに必要なすべてのデータがあります。次に、各ページ用に作成されたカスタム プラグインを使用してページを初期化します。これにより、プラグインに渡す関連する json データを使用して dom が動的に構築されるため、ajax リクエストはありません。私のウェブサイトのリンクは、!#about、!#home などの形式になっています。現在、プラグインの init メソッドはhashchangeで呼び出されています。これらのページを Google ボットがクロールできるようにするにはどうすればよいですか? また、これらのページごとに異なるタイトルと説明のメタ タグを作成するにはどうすればよいですか?

Googleドキュメントや他の多くのWebサイトで見つけたさまざまなことを試しました。リンクを #mylink から #!mylink に変更したため、Googleはそれを get _escape_fragment_ 変数として解釈する 必要があるため、この PHP コードのチャンクを追加しようとしました。

project.php は、クロールしたい関連情報を含む html スナップショットです。基本的にコア情報のみです。しかし、私が見る限り、何も起こらない... :( 結局、AJAXリクエストなしでこれを達成する方法はありますか?