![配列のデータを出力
%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](https://image.slidesharecdn.com/railsknockoutjs-150611120108-lva1-app6892/85/Rails-Knockout-js-32-320.jpg)
![多重バインドでエラー
%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](https://image.slidesharecdn.com/railsknockoutjs-150611120108-lva1-app6892/85/Rails-Knockout-js-44-320.jpg)
RailsでKnockout.js
- 2. 自己紹介 • 逸見 誠(へんみ まこと) • Twitter:@mako_wis • 株式会社クレオフーガ • フロントエンド/iOSアプリエンジ ニア
- 3. 近況 ・Knokout.js + .Net MVCでお仕事 ・フットサルしてます
- 4. 勉強会スタッフ 岡山Ruby, Ruby on Rails勉強会（雑用） Okayama.rb(イベント作成係） 中国地方DB勉強会（雑用） オープンセミナー岡山（会計・雑用）
- 7. 主な特徴 ※日本語ドキュメントから引用 エレガントな依存トラッキング - データモデルが変更される度に、UIの関連付けられた部分を更新し ます。 宣言型 バインディング - データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な 動的UIも、バインディング・コンテキストを階層化させることで簡単に 作成できます。 拡張が容易 - 新たなバインディングの仕組みを実装することも、最小限のコード量 で実現できます。
- 8. その他のメリット ※日本語ドキュメントから引用 純粋な JavaScript ライブラリである - サーバサイド, クライアントサイドの技術を選びません。 既存のWebアプリケーションにも投入できる - アーキテクチャに大きな変更を必要としません。 コンパクト - gzip圧縮済みであればおよそ13KB程度です。
- 9. その他のメリット ※日本語ドキュメントから引用 メインストリームのブラウザをサポート - ( IE6以降, Firefox2以降, Chrome, Safari 等 ) ビヘイビア駆動開発に向いている - ビヘイビア駆動開発（テストコードが仕様書と ほぼ同義となる開発手法）を用いて、新しいブラ ウザやプラットフォームでの動作検証を簡略化す ることができます。
- 10. とりあえず使ってみよう
- 11. Railsに導入してみる
- 13. 今回はgemを使います
- 15. これで使える・・・
- 16. と思ったら罠が
- 17. Rails4そのままだと動かない
- 18. 原因は・・・
- 21. さようならturbolinks
- 22. これで使える
- 24. 使うと楽できる所
- 25. 入力値を同期したい
- 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. デモ
- 28. クリックに対して何かしたい
- 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. デモ
- 31. 配列に入ってるデータを表示
- 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. デモ
- 35. 実際使ってみてどうなの？
- 37. まとめ
- 38. Knockout.js便利！
- 39. プロジェクトにも入れやすい
- 41. ぜひ使ってみてください
- 42. おわり
- 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