nantekkotai

クリックイベント

knockout.jsにはイベントはそれなりにあります。
詳しくは公式ドキュメントを読んでもらうとして、ここでは一番使いどころの多い「click」イベントについて説明します。

<div>
  You've clicked <span data-bind="text: numberOfClicks"></span> times
  <button data-bind="click: incrementClickCounter">Click me</button>

nantekkotai

キー入力を監視するには

サジェストやオートコンプリート、あるいは文字数カウンタ機能を実装するためには、入力値が即座に反映されなければいけません。

<p>userName: <input data-bind="value: userName" /></p>
<p>Counter: <span data-bind="text: userNameCount"></span></p>
 
<script type="text/javascript">
var viewModel = {

nantekkotai

フォームでEnter->イベント実行するサンプル

// knockout初期化前に以下を実行
ko.bindingHandlers.executeOnEnter = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var allBindings = allBindingsAccessor();
    $(element).keypress(function (event) {
      var keyCode = event.which || event.keyCode;
 if (keyCode === 13) {

nantekkotai

jQueryUIのドラッグ＆ドロップに対応させる

knockout以外のライブラリやプラグインからイベントを追加することもできます。
その１で紹介したbindingHandlersに追加する方法で実装します。

※必要なjQueryUIのライブラリを読み込むこと。

// ここでドラッグ＆ドロップする要素を一時的に保持します
var _dragged;

nantekkotai

アイテム追加／削除時にアニメーションを入れるには

jQueryでアイテムを追加するときとか、slideUpしたりDownしたりfadeOutさせたりすることもあるでしょう。
knockout.jsでは通常のステップだけだと、いきなり追加されるか削除されるかしかありません。

<ul data-bind="foreach: items">
  <li><span data-bind="text: value"></span></li>
</ul>

nantekkotai

日本語入力を考慮したEnterで実行

例えばEnterで実行した瞬間に文字列を切り取るとか、そういうことをしたとします。
日本語入力の場合は変換途中のEnterである可能性があります。
そうするとおかしな状態で切り取ってしまうかもしれません。
それを防ぐためにはどうするか。

入力状態を監視する仕組みを作るのです。

nantekkotai

時間差で実行するthrottle

例えばフォームの値を監視するとき、入力値が常に返ってくるとその数だけイベントが発生してしまう。
knockoutでは変更が完了してから、時間設定まで付けて監視する事ができる。

<input type="text" value="" data-bind="value: instantaneousValue, valueUpdate:'afterkeydown'" />

nantekkotai

gem 'vanity'

nantekkotai

$ launchctl unload -w ~/Library/LaunchAgents/homebrew.mxcl.redis.plist

nantekkotai

$ brew unlink ruby-build
$ brew install --HEAD ruby-build