Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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を関連付ける、シンプルで明確な方法です。複雑な
動的...
その他のメリット
※日本語ドキュメントから引用
純粋な JavaScript ライブラリである
- サーバサイド, クライアントサイドの技術を選びません。
既存のWebアプリケーションにも投入できる
- アーキテクチャに大きな変更を必要としませ...
その他のメリット
※日本語ドキュメントから引用
メインストリームのブラウザをサポート
- ( 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 = ->...
デモ
クリックに対して何かしたい
クリックでカウントアップ
%span(data-bind="text: numberOfClicks")

回クリックしました

%button(data-bind="click: incrementClickCounter")

クリックして...
デモ
配列に入ってるデータを表示
配列のデータを出力
%ul(data-bind="foreach: users")

%li

%span(data-bind="text: name”)
:
%span(data-bind="text: type")
$ ->

Testap...
デモ
詳しい情報は
日本語ドキュメントで
http://kojs.sukobuto.com/
実際使ってみてどうなの?
個人的にいいなと思ってる所
・画面周りの制御に特化してる
・CSSの付け替え、表示切り替えが楽
・Javascript用のクラスを付けなくていい
・Webフレームワークの領域と喧嘩しない
まとめ
Knockout.js便利!
プロジェクトにも入れやすい
まだCSSの
切り替えで消耗してるの?
ぜひ使ってみてください
おわり
はまり所
・2重バインドでエラー
・否定の場合は()が必要
多重バインドでエラー
%ul(data-bind="foreach: users")

%li

%span(data-bind="text: name”)
:
%span(data-bind="text: type")
$ ->

Testa...
Upcoming SlideShare
Loading in …5
×

RailsでKnockout.js

1,297 views

Published on

第18回 岡山Ruby, Ruby on Rails勉強会での発表資料

Published in: Software
  • Be the first to comment

  • Be the first to like this

RailsでKnockout.js

  1. 1. RailsでKnockout.js 逸見 誠(@mako_wis)
  2. 2. 自己紹介 • 逸見 誠(へんみ まこと) • Twitter:@mako_wis • 株式会社クレオフーガ • フロントエンド/iOSアプリエンジ ニア
  3. 3. 近況 ・Knokout.js + .Net MVCでお仕事 ・フットサルしてます
  4. 4. 勉強会スタッフ 岡山Ruby, Ruby on Rails勉強会(雑用) Okayama.rb(イベント作成係) 中国地方DB勉強会(雑用) オープンセミナー岡山(会計・雑用)
  5. 5. アジェンダ Knockout.jsとは Railsに導入してみる 使うと楽できる所 使ってみた感想
  6. 6. Knockout.jsとは
  7. 7. 主な特徴 ※日本語ドキュメントから引用 エレガントな依存トラッキング - データモデルが変更される度に、UIの関連付けられた部分を更新し ます。 宣言型 バインディング - データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な 動的UIも、バインディング・コンテキストを階層化させることで簡単に 作成できます。 拡張が容易 - 新たなバインディングの仕組みを実装することも、最小限のコード量 で実現できます。
  8. 8. その他のメリット ※日本語ドキュメントから引用 純粋な JavaScript ライブラリである - サーバサイド, クライアントサイドの技術を選びません。 既存のWebアプリケーションにも投入できる - アーキテクチャに大きな変更を必要としません。 コンパクト  - gzip圧縮済みであればおよそ13KB程度です。
  9. 9. その他のメリット ※日本語ドキュメントから引用 メインストリームのブラウザをサポート - ( IE6以降, Firefox2以降, Chrome, Safari 等 ) ビヘイビア駆動開発に向いている - ビヘイビア駆動開発(テストコードが仕様書と ほぼ同義となる開発手法)を用いて、新しいブラ ウザやプラットフォームでの動作検証を簡略化す ることができます。
  10. 10. とりあえず使ってみよう
  11. 11. Railsに導入してみる
  12. 12. 導入方法 ・JSファイルをダウンロードして追加 ・gemを使う
  13. 13. 今回はgemを使います
  14. 14. knockoutjs-rails ・JSファイルをダウンロードして追加 ・gemを使う
  15. 15. これで使える・・・
  16. 16. と思ったら罠が
  17. 17. Rails4そのままだと動かない
  18. 18. 原因は・・・
  19. 19. _人人人人人人人_ > turbolinks <  ̄Y^Y^Y^Y^Y^Y ̄
  20. 20. Rails4デフォルトで動かない ・どうやらturbolinksが原因っぽい ・turbolinksとknockoutが競合してる? ・turbolinksを無効にすると動きます
  21. 21. さようならturbolinks
  22. 22. これで使える
  23. 23. 導入方法まとめ ・プロジェクトにknockoutを追加 ・turbolinksを無効にする←大事!
  24. 24. 使うと楽できる所
  25. 25. 入力値を同期したい
  26. 26. 入力値を同期する %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
  27. 27. デモ
  28. 28. クリックに対して何かしたい
  29. 29. クリックでカウントアップ %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
  30. 30. デモ
  31. 31. 配列に入ってるデータを表示
  32. 32. 配列のデータを出力 %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
  33. 33. デモ
  34. 34. 詳しい情報は 日本語ドキュメントで http://kojs.sukobuto.com/
  35. 35. 実際使ってみてどうなの?
  36. 36. 個人的にいいなと思ってる所 ・画面周りの制御に特化してる ・CSSの付け替え、表示切り替えが楽 ・Javascript用のクラスを付けなくていい ・Webフレームワークの領域と喧嘩しない
  37. 37. まとめ
  38. 38. Knockout.js便利!
  39. 39. プロジェクトにも入れやすい
  40. 40. まだCSSの 切り替えで消耗してるの?
  41. 41. ぜひ使ってみてください
  42. 42. おわり
  43. 43. はまり所 ・2重バインドでエラー ・否定の場合は()が必要
  44. 44. 多重バインドでエラー %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

×