1

JavaScript でカスタマイズした html コンポーネントがいくつかあります。たとえば、リストに項目を追加および削除するためのボタンがあるリストがあります。これらのコンポーネントを再利用できるようにしたいのですが、最善の方法がわかりません (この特定のプロジェクトは Spring MVC です)。

私が検討したオプションは、他のページまたはカスタム タグに含めることができる JSP フラグメントです。サーバーを使用する必要のない代替手段はありますか (タグ処理など)。一緒に使用するいくつかの html/javascript ピースがある場合、それらをモジュール化する簡単な方法があるはずです。

4

1 に答える 1

0

ほとんどの JS UI フレームワークは、完全に JS で作成することによって UI コンポーネントを提供します。これは、サーバー側のフレームワーク (ruby、php、.net で使用できます) から独立しており、HTML をきれいに保つため、最善の策かもしれません。

ボタン付きのリストの例では、標準の HTML オブジェクトで呼び出された JS 関数からリストとボタンの両方をレンダリングします。あなたのケースでは、MVC フレームワークを使用してリストにデータを書き込んでいる場合は、それを続けて、リストを入力として受け入れるように JS 作成ロジックを記述してから、高度なスタイリングと UI (ボタンのような) をレンダリングすることを選択できます。 ） その周りに。これにより、サーバー側からのデータを通常どおり受け入れることができ、HTML コードに最終製品と同様の外観を与えることができます (追加/削除ボタンがないだけです)。ただし、HTML/JS ロジックを再利用できます。できるだけ。

現在のコードが次のようになっている場合:

<div class="addremovelist">
    <select>
        <option>blah</option>
        <option>blah</option>
        <option>blah</option>
    </select>
    <div class="addremovebuttons">
        <input type="button" value="Add" />
        <input type="button" value="Add All" />
        <input type="button" value="Remove" />
        <input type="button" value="Remove All" />
    </div>
<div>

次のように記述します。

<select id="myselect">
    <option>blah</option>
    <option>blah</option>
    <option>blah</option>
</select>

ウィンドウの読み込みイベントで次の JavaScript を使用します。

$('#myselect').addRemoveList({myoptions: 'ifnecessary'});

またはそのようなもの

于 2013-06-03T22:47:09.423 に答える