Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

キー入力するたびに検索を実行するような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']
});

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

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.別のメソッド
});

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

sakura_internet
さくらレンタルサーバ、さくらのVPS、 さくらのクラウド、さくらの専用サーバなどのインターネットサービス・ITプラットフォームを提供しています。
https://www.sakura.ad.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした