読者です 読者をやめる 読者になる 読者になる

JsViewsとTypeahead.jsを併用するとバインディングが期待通りに動かない

おそらくJsViewsに限った話ではなくて、双方向バインディングをやってくれるテンプレートエンジンなりフレームワーク全般にかかるであろう事案。

問題点

以下のイベント発火時に双方向バインディング(View -> Model)が動作しない。

  • typeahead:autocompleted
  • typeahead:selected

原因

上記イベントが発生する場合にchangeイベントが発火されないため、バインディングが動作しない。

対策

無理やりchangeイベントを発火する。

$(".suggest").on("typeahead:autocompleted", function (e) {
    $(e.target).trigger("change");
});
$(".suggest").on("typeahead:selected", function (e) {
    $(e.target).trigger("change");
});

厳密にやると、typeaheadのイベントを拾う→ユーザキー操作なしでblurが発生するタイミングでchangeを発火すべきではあるのだけど、バインディングの問題に対処するのであれば、これで十分。