0

Meteor アプリで編集可能なテキストを作成する方法を考え出しました。しかし、それは DRY パラダイムに従っていないので、それを変更したいのですが、まだ Javascript が苦手です...

テキストを含む表のセルがあり、それをダブルクリックして編集したいとします。これを処理するためにテンプレート変数を作成しました。

<td class="itemName">
    {{#unless editItemName}}
        {{name}} 
    {{else}}
        <input class="editItemName" type="text" value="{{name}}" style="width:100px;">
    {{/unless}}
</td>

次に、ダブルクリックでこのトランジションを実行するイベントを作成します。

Template.inventoryItemDetail.events = {

'dblclick td.itemName': function (evt) {
  Session.set("editItemName",true);
},
'blur input.editItemName': function () {
  Session.set("editItemName",null);
},};

また、ToDo のサンプル アプリの ok_cancel コードを再利用しました (ただし、これはあまり関係ありません)。

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
        evt.currentTarget.blur();


      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value) {
          ok.call(this, value, evt);
          evt.currentTarget.blur();
        }
        else {
          cancel.call(this, evt);
          evt.currentTarget.blur();
        }
      }
    };
  };

Template.inventoryItemDetail.events[ okcancel_events('input.editItemName') ] = make_okcancel_handler({
ok: function (value) {
  Items.update(this._id, {$set: {name: value}});
}
});

最後に、このセッション変数をテンプレート変数に関連付ける必要があります。

Template.inventoryItemDetail.editItemName = function () {
  return Session.get("editItemName");
};

今のところ、編集可能なテキスト フィールドごとにこのすべてを何度も繰り返しましたが、すべてうまくいきましたが、ひどくプログラミングの練習のように思えます。Github でさまざまな編集可能なテキスト ユーティリティを見つけましたが、完全には理解できず、どれも Meteor 用ではありません!

編集可能なテキスト フィールドごとにこのばかげた量を繰り返さずに編集可能なテキストを作成できるツールを作成して、Meteor と Javascript の知識を広げたいと思っています。

ありがとう、

チェット

4

1 に答える 1

0

パッケージのhttps://github.com/nate-strauser/meteor-x-editable-bootstrap 。

ドキュメントのhttp://vitalets.github.io/x-editable/docs.html 。

私は自分のプロジェクトでこれを実装したばかりで、二度と戻ることはありませんcontenteditable。

于 2013-08-08T02:29:39.703 に答える