Post on 05-Aug-2015
RailsでKnockout.js逸見 誠(@mako_wis)
自己紹介• 逸見 誠(へんみ まこと)
• Twitter:@mako_wis
• 株式会社クレオフーガ
• フロントエンド/iOSアプリエンジニア
近況
・Knokout.js + .Net MVCでお仕事 ・フットサルしてます
勉強会スタッフ
岡山Ruby, Ruby on Rails勉強会（雑用） Okayama.rb(イベント作成係） 中国地方DB勉強会（雑用） オープンセミナー岡山（会計・雑用）
アジェンダ
Knockout.jsとは Railsに導入してみる 使うと楽できる所 使ってみた感想
Knockout.jsとは
主な特徴 ※日本語ドキュメントから引用
エレガントな依存トラッキング - データモデルが変更される度に、UIの関連付けられた部分を更新します。
宣言型 バインディング - データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な動的UIも、バインディング・コンテキストを階層化させることで簡単に作成できます。
拡張が容易 - 新たなバインディングの仕組みを実装することも、最小限のコード量で実現できます。
その他のメリット ※日本語ドキュメントから引用
純粋な JavaScript ライブラリである - サーバサイド, クライアントサイドの技術を選びません。
既存のWebアプリケーションにも投入できる - アーキテクチャに大きな変更を必要としません。
コンパクト - gzip圧縮済みであればおよそ13KB程度です。
その他のメリット ※日本語ドキュメントから引用
メインストリームのブラウザをサポート - ( IE6以降, Firefox2以降, Chrome, Safari 等 )
ビヘイビア駆動開発に向いている - ビヘイビア駆動開発（テストコードが仕様書とほぼ同義となる開発手法）を用いて、新しいブラウザやプラットフォームでの動作検証を簡略化することができます。
とりあえず使ってみよう
Railsに導入してみる
導入方法
・JSファイルをダウンロードして追加 ・gemを使う
今回はgemを使います
knockoutjs-rails
・JSファイルをダウンロードして追加 ・gemを使う
これで使える・・・
と思ったら罠が
Rails4そのままだと動かない
原因は・・・
＿人人人人人人人＿ ＞ turbolinks ＜
‾Y^Y^Y^Y^Y^Y‾
Rails4デフォルトで動かない
・どうやらturbolinksが原因っぽい ・turbolinksとknockoutが競合してる？ ・turbolinksを無効にすると動きます
さようならturbolinks
これで使える
導入方法まとめ
・プロジェクトにknockoutを追加 ・turbolinksを無効にする←大事！
使うと楽できる所
入力値を同期したい
入力値を同期する
%input(type="text" data-bind="value: message") %br %span(data-bind="text: message")
$ -> TestappViewModel = -> self = this self.message = ko.observable("Hello World!!") ko.applyBindings new TestappViewModel() return
coffescript
haml
デモ
クリックに対して何かしたい
クリックでカウントアップ
%span(data-bind="text: numberOfClicks") 回クリックしました%button(data-bind="click: incrementClickCounter") クリックしてください
$ -> TestappViewModel = -> self = this self.numberOfClicks = ko.observable(0) self.incrementClickCounter = -> previousCount = this.numberOfClicks() this.numberOfClicks(previousCount + 1)
ko.applyBindings new TestappViewModel() return
coffescript
haml
デモ
配列に入ってるデータを表示
配列のデータを出力
%ul(data-bind="foreach: users") %li %span(data-bind="text: name”) ： %span(data-bind="text: type")
$ -> TestappViewModel = -> self = this self.users = ko.observableArray([ { name: "太郎", type: "長男" }, { name: "二郎", type: "次男" }, { name: "花子", type: "長女" } ]);
ko.applyBindings new TestappViewModel() return
coffescript
haml
デモ
実際使ってみてどうなの？
個人的にいいなと思ってる所
・画面周りの制御に特化してる ・CSSの付け替え、表示切り替えが楽 ・Javascript用のクラスを付けなくていい ・Webフレームワークの領域と喧嘩しない
まとめ
Knockout.js便利！
プロジェクトにも入れやすい
まだCSSの 切り替えで消耗してるの？
ぜひ使ってみてください
おわり
はまり所
・2重バインドでエラー ・否定の場合は()が必要
多重バインドでエラー
%ul(data-bind="foreach: users") %li %span(data-bind="text: name”) ： %span(data-bind="text: type")
$ -> TestappViewModel = -> self = this self.users = ko.observableArray([ { name: "太郎", type: "長男" }, { name: "二郎", type: "次男" }, { name: "花子", type: "長女" } ]);
ko.applyBindings new TestappViewModel() return
coffescript
haml