2

JEdi​​tableや同様のプラグインのようなJavaScriptでインプレースエディターを作成する方法を探しています。ただし、違いは、私のエディターが単一フィールドではなく複数フィールド形式になることです。

既存のアイテムの編集と新しいアイテムの作成など、同じフォームが異なる部分で使用されるため、共有機能（検証、キャンセルボタンなど）を複製することなく、それぞれの場合にコールバック関数を指定できるようにしたいと思います。 。）。

現在、私はそれを素朴に実装しようとしましたが、イベントハンドラーがコンポーネントとして一緒になっているのではなく、ソースコードの周りに散らばっているため、コードはひどいように見えます。

だから私の質問は、これを実装するための推奨される方法は何ですか？機能を提供するjQueryプラグインがある場合は、それが最も簡単な方法かもしれません。それ以外の場合、コードを適切に構造化するにはどうすればよいですか？

4

2 に答える 2

0

コールバックの定義を分離し、編集可能なコールバックで目的のコールバックを検索します

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});
于 2010-07-06T18:37:50.377 に答える
0

問題は、表示されたテキストからデータを分離する必要があることです。表示するデータのチャンクごとに、json dict (ページに書き込むか、ajax でプル) をフォームの各フィールドのテキストに関連付けます。

たとえば、名前 (first、middle、last) を使用している場合は、次のように名前を表示します。

<span class="editable">Colin M. Hansen</span>

そして、次のようにフォームを書きます。

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

そして、次のような形式の入力にマップされた辞書があります。

name1 = {
    first: 'Colin',
    mi: 'M',
    last: 'Hansen'
};

onclick作成する共通コードは、要素のテキストのフォームを切り替え、span各入力フィールドに dict からのデータを入力します。送信コードは、新しいデータをname1サーバーとの間で保存し、新しい表示テキストを返します。

于 2010-07-06T18:32:25.227 に答える