0

私たちのプロジェクトでは、現在次の問題があります。次のように、いくつかのクリックを要素ロックのリストにバインドする必要があります。

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>リストコンテンツ</div></li>
    <li class="listeelement" id="load-content-id-2"><div>リストコンテンツ</div></li>
    <li class="listeelement" id="load-content-id-3"><div>リストコンテンツ</div></li>
    <li class="listeelement" id="load-content-id-4"><div>リストコンテンツ</div></li>
  </ul>

クリックする.listelementと、element-id などの特定のパラメータを持つ特定のアクションにリクエストが送信されます (-> module/action?id=1&something=something)。

リクエストを送信し、クリックとリクエストに関係するすべてのことを処理する汎用リクエスト クラスを作成したいのですが、目立たないクリックをクラスにバインドし.listelementて保存するのが良い方法かどうかわかりません。マークアップのどこかにあるアクションとパラメーターの情報、またはonclick="sendRequest(action, params)".

obstructive-onclick-solution の方がはるかに簡単に思えますが、それが良い解決策であるかどうかはわかりません。

どなたかご意見いただければ幸いです。

4

2 に答える 2

1

onclick適切なマークアップを使用し、属性に依存しないことをお勧めします。最大の理由は、マークアップがきれいに保たれることと、これらの要素がたくさんある場合は、ワイヤ上のバイトサイズが大幅に削減されることです。

また、id 属性の値をエンコードしません。HTML5 データ属性を合法的に使用できるようになり、後方互換性もあるからです。

<ul id="container">
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li>
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li>
    ...
</ul>

Requestマークアップにデータがあれば、クリック ハンドラーをセットアップしてクラスに接続するのは比較的簡単です。

var list = document.getElementById("container");
var items = list.getElementsByTagName("li");

for(var i = 0; i < items.length; i++) {
    items[i].onclick = (function(element) {
        return function() {
            var action = element.getAttribute('data-action');
            var id = element.getAttribute('data-id');
            var params = element.getAttribute('data-params');

            sendRequest(action, params);
        };
    })(items[i]);
}

要素が多数ある場合は、<li>要素ごとに 1 つのハンドラーを追加するよりも、イベント委任の方が適している場合があります。また、onclickプロパティの代わりにハンドラーを追加するために DOM イベント登録モデルを使用することを検討してください。これは、オプションを最大 1 つのハンドラーに制限するためです。

于 2010-07-13T09:53:15.837 に答える
0

ここにオプションがあります。代わりにli のリンク<a>を作成し、コントローラー/アクションをクエリ文字列として配置します (バックエンドがプリティ URL を解析できる場合は、スラッシュで区切られたキーと値のペア)。AJAX呼び出しを行っていると仮定すると、ページの読み込み時に<a>、特定のクラスを持つすべての要素のクリックイベントをフックする単純なjavascriptがあります（.ajax-linkなどの適切なものを選択できます）。ハンドラーで、ブラウザーが href に移動しないように既定のアクションを防止し、href を取得して解析し、それを使用して xhr を構成すると、すぐに使用できます。jQuery のようなライブラリを使用しているかどうかはわかりませんが、それによって負荷が軽減され、コードが大幅に削減されます。

必要に応じて<a>、既存の 内にをネストできます<li>。

これは役立つかもしれません:バインド/クリックでの JQuery パラメーター インジェクションと、パラメーターを使用した埋め込みクリック ハンドラー

于 2012-05-17T18:59:51.507 に答える