日本語IMEで未確定文字が無く且つ文字列が変更された場合に処理を実行するためのBackbone.js用Mixinを作りました

はじめに

キー入力するたびに検索を実行するようなUIを実現する場合、英語圏ではkeyupイベントで処理を実行すればよいのですが、日本語だとIMEで未確定文字がある間にもkeyupイベントが発生してしまい入力中の文字で検索されてしまい使い勝手がよくありません。

以前日本語入力環境でキー入力が一段落したらハンドラを実行するjQueryプラグインを作ってみた - Qiitaので、それをBackbone.jsに移植してみました。

実装の形式ですが、Backbone.js Patterns and Best Practicesで、例としてドラッグ可能にする機能拡張をDraggableMixinというミックスインとして提供する例が紹介されていたので、今回はこれに習ってMixinとして実装してみました。

使い方

使い方は以下のように目的のビュークラスのprototypeを指定してBackboneJapaneseInputHandlerMixiを実行するだけです。

https

BackboneJapaneseInputHandlerMixin.call(Backgrid.Extension.ClientSideFilter.prototype);
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories,
  fields: ['name']
});

• デモ: http://hnakamur.github.io/backgrid-example/complete-example-ja.html
• デモソース: https://github.com/hnakamur/backgrid-example/
• Mixinのレポジトリ: https://github.com/hnakamur/backbone-japanese-input-handler-mixin.js

未確定文字が無く、且つ文字列が変更された場合に即座に処理が実行されます

hnakamur/jquery.japanese-input-changeでは入力が落ち着いてから指定の時間たった場合に検索を実行していましたが、今回は即座に実行するようにしました。

理由は、backgrid-filterプラグインがunderscore.jsのdebounceを使って検索を連発しないようになっているので、さらに待ちを入れるのはよくないと考えたからです。

https

      this._debounceMethods(["search", "clear"]);

検索以外にも利用可能です

BackboneJapaneseInputHandlerMixin.call()の実装は以下のようになっています。

https

    return function(config) {
      this.inputSelector =
        config && config.inputSelector || "input[type=search]";
      this.handlerMethod = config && config.handlerMethod || this.search;
      this._readyToCallHandler = true;
      this._oldVal = undefined;
      this._callHandler = _callHandler;
      this.onFocus = onFocus;
      this.onBlur = onBlur;
      this.onKeyup = onKeyup;
      this.onKeydown = onKeydown;
      this.events["focus " + this.inputSelector] = "onFocus";
      this.events["blur " + this.inputSelector] = "onBlur";
      this.events["keyup " + this.inputSelector] = "onKeyup";
      this.events["keydown " + this.inputSelector] = "onKeydown";
      return this;
    };

BackboneJapaneseInputHandlerMixin.call(Backgrid.Extension.ClientSideFilter.prototype, {
  inputSelector: "別のセレクタ",
  handlerMethod: this.別のメソッド
});

のようにパラメータを指定してミックスインすれば検索以外の用途にも使えるようになっています（実際に試したことはまだ無いです）。