4

Meteor での Todos の例を理解しようとしています。私が理解できないコードがあります:

// Returns an event map that handles the "escape" and "return" keys and
// "blur" events on a text input (given by selector) and interprets them
// as "ok" or "cancel".
var okCancelEvents = function (selector, callbacks) {
  var ok = callbacks.ok || function () {};
  var cancel = callbacks.cancel || function () {};

  var events = {};
  events['keyup '+selector+', keydown '+selector+', focusout '+selector] =
    function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);

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

何をevents['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){}もたらしますか?

以下を文字列に変換する必要があるのはなぜString(evt.target.value || "")ですか?

上記の関数の evt 引数には、.type、.target、.target.value が必要ですか? 私はevtで何を渡すことができますか?

4

2 に答える 2

4

events['keyup '+selector+', keydown '+selector+', focusout '+selector] = function(){}、流星がキープレス(キーアップ、キーダウン)イベントとロストフォーカスイベント(フォーカスアウト)をマップするための関数を作成します。この関数は、特定のcssセレクターで要素にバインドするために生成されてmeteorsテンプレートシステムに渡されます。

この値には、イベントが発生したときにトリガーされるevtDOM値が含まれます。event渡される必要があるのは、イベントの発生時に指定されevtた元のDOMだけです。これは、イベントがトリガーされたときに(変数として)eventによって指定されます。event

私はそれをコードで最もよく説明できます。todosの例は、cssセレクターを使用してイベントを要素にバインドすることを除いて同じことを行います。

<input type="text" onkeyup="doSomething(event);"/>
<script>
//js code
function doSomething(evt) { console.log(evt.target.value) }
</script>

String(evt.target.value || "")基本的に、evt.target.valueが他の何かとして入力された場合に備えて、が文字列であることを確認します。文字列にできない場合は100%わかりませんが、ブラウザは常にイベントを標準で発生させるとは限らないと思います。

イベントは必ずしも必要ではありません。しかし、それは非常に便利です。コードサンプルでは、​​イベントを発生させたテキストボックスと押されたキーを識別するために使用しました。

イベントの詳細:

于 2013-02-06T17:51:46.037 に答える
4

私は質問を3つの部分に分けました:

events ['keyup' + selector +'、keydown' + selector +'、focusout' + selector] = function(){}は何を生成しますか?

このメソッドは、各関数の結果の詳細をカスタムまたはイベントにキュレートする単一の関数の周りに、およびDOMイベントokCancelEventsをラップする方法です。keyupkeydownfocusoutokcancel

これにより、実装EventMapにバインドされたオブジェクトが生成され、すべての、、、およびイベントがとして、またはを介して送信されます。Template.todos.eventskeyupkeydownfocusoutokcancelEventMap

次の文字列に変換する必要があるのはなぜですか:String(evt.target.value || "")?

これは必要ないと思います。ブラウザは文字列プリミティブを文字列オブジェクトとして解釈するvar value = evt.target.value || ""ため、同様に機能します。

上記の関数のevt引数には、.type、.target、および.target.valueが必要ですか?evtで何を渡すことができますか?

evt引数は、、、、およびメソッドから渡されたものでeventあり、このネイティブオブジェクトのベイクインプロパティです。これを手作業で作成する必要はありません。keyupkeydownfocusouttargettarget.valueevent

于 2013-02-06T18:18:37.320 に答える