0

小さな Web サイトを作成していますが、同じ html を複数回使用する方法が必要です。現在、すべてのページに共通する 1 つの html ファイルがあり、AJAX を使用して HTML の一部を含む .html ファイルを取得しています。

例:

メインのhtml:

<html>
    <head>...</head>
    <body>
        <div class="main-content-wrapper">
            <!-- AJAX puts html here -->
        </div>
    </body>
</html>

JavaScript: (抜粋)

// Fire ajax request
$.ajax({
    url: pagename,
}).done(function (data) {

    // Overwrites old html with new html
    $('.main-content').html(data);

    if (callback)
        callback();   
});

しかし、イベントをボタンにバインドしようとしているとき、html ページなどに JavaScript/CSS を含めようとしているときに問題が発生します。フルウェイトのフレームワークは本当に必要ありません。html を取得する必要があるだけなので、二度書かなくていい。誰でも方法を知っていますか？

編集：couchdb から提供されるファイルを取得するので、PHP のようなサーバー側言語を使用できるかどうかわかりません。

4

3 に答える 3

5
  1. サーバー側の言語を使用できます（phpやincludeの使用など）
  2. JS テンプレート システム (underscore.js や mustache.js など) を使用できます。
  3. または、現在の方法でそれを続けたい場合は、jQuery の .on() を使用して、将来挿入される DOM 要素にイベントをバインドします
于 2013-03-05T17:18:29.607 に答える
2

あなたの主な目標が「DRY」（自分自身を繰り返さないでください）を維持し、同じHTMLを複数回書くことを避けることである場合、それを達成するための（AJAX呼び出しよりも）簡単な方法があります。

実際には、Mustache.js（または同様の）テンプレート言語である_showリクエストを使用してCouchDBで完全なテンプレートを実行し、CouchDBサーバーを介してすべてを実行できます。_showリクエストは任意のドキュメントで使用できます。show関数は、ドキュメントを最初のパラメーターとして受け取ります。次に、テンプレートエンジンをロードし（Mustache.jsは、構築しているものに最適である可能性があります）、Mustache.to_html（）を実行して出力を返します。

_show関数についてもう少し詳しく説明します：http： //guide.couchdb.org/draft/show.html

jQuery Mobile + CouchDB+Mustache.jsの使用に関する一連の優れたブログ投稿もあります。シリーズの3番目のエントリでは、具体的にテンプレートについて説明しています。http: //custardbelly.com/blog/2010/12/28/jquery-mobile-couchdb-part-3-templates-and-mustache-js/

彼がそこで説明しているすべてのもの（jQuery Mobileなど）は必要ありませんが、テンプレート関連の部分は、構築しているものに適合しているようで、少なくとも明確な_show関数の例があります。

さらに、CouchDBでPHPを使用することを妨げるものは何もありません。それは単なるオーバーヘッドです（そして一般的には不要です）。別のHTTPサーバー（CouchDBにあるサーバー）の前でHTTPサーバー+PHPを実行します。とにかく、それは完全に可能であり、画像操作や電子メールの送信などを行っていて、それらを_changesフィードへのリアクティブイベントとして構築したくない場合は、そのアプローチに価値があります（これは偉大さの「より深い」です）この時点で必要になるよりもCouchDBの）。

PHPをCouchDBルートの前に移動する場合は、Sagをチェックすることをお勧めします。http：//saggingcouch.com/これは私が見つけたCouchDB用の最もクリーンなPHPライブラリです。

最後に、IrisCouch.comのJasonSmithによるStatic+プロジェクトをチェックアウトすることもできます： https ：//github.com/iriscouch/static-plus

テンプレートを作成しますが（Handlebars.jsを使用-Mustache.jsと非常によく似ています）、開発マシンで実行し、静的コンテンツのみをCouchDBに公開します。テンプレート化されたDRY性が得られますが、プリコンパイルされたものを提供するパフォーマンスがあります。

そこに何かが役立つことを願っています。:)

于 2013-03-06T14:07:49.237 に答える
1

このタスクにはサーバー側のテクノロジーを使用することをお勧めします。ヘッダー/フッター、CSS リンク、および JS インクルードを含めるために PHP を使用しています。シンプルなワンライナーです：

<?php include '<yourfile>.html'; ?>

それは非常にうまく機能します。

JS を使用する必要がある場合は、イベントを DOM にインポートした後にバインドする必要がありますが、CSS は自動的に適用されます。

于 2013-03-05T17:20:42.053 に答える