How do you like knockout?
4 likes2,714 views
『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料 http://gbdaitokai.doorkeeper.jp/events/15289
How do you like knockout?
- 1. How do you like knockout? 合同勉強会in 大都会岡山-2014 Winter- 2014/12/13 OITEC きよくらならみ
- 2. 自己紹介 ?きよくらならみ –@kiyokura –kiyokura.hateblo.jp ?NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS ?近況：#Ｒ社
- 3. コミュニティ紹介 ?Okayama IT Engineers Community –OITEC ?.NET系?MS系のテクノロジが多い？ –特にしばりはないので、色々welcome ?http://oitec.vbstation.net/
- 4. 本日のお品書き ?办苍辞肠办辞耻迟.箩蝉のぼんやりした説明 ?はじめてのばいんでぃんぐ ?バインディングの基本 ?その他、色々 ?もうちょっとだけ 実用的かもしれない例 ?まとめ
- 6. Declarative Bindings Automatic UI Refresh Dependency Tracking Templating SimplifydynamicJavaScriptUIs withthe Model-View-ViewModelpattern
- 7. なんのこっちゃ
- 8. knockout.jsとは ?JavaScriptのライブラリ –フレームワークとも言われるが… ?AngularJSなどと違いフルスタックではない ?コンセプト –宣言型バインディング –自動的なUIの更新 –依存性の追跡 –テンプレート
- 9. knockout.jsとは ?http://knockoutjs.com/ ?OSS –MITライセンス –https://github.com/knockout
- 10. こんなことができる（ようになる） ?動的なUIをシンプルに構築 –JSとHTMLの依存関係を整理しやすく –惭痴痴惭パターンの导入も视野に
- 11. 非機能的な特徴 ?他のライブラリに依存しない –取り回しが良い ?機能がシンプル –学習コストが低い ?導入のハードルが全体的に低い –「一部だけに使用」にも抵抗が少ない –サーバサイドの言語?フレームワークを選ばない –古いブラウザでも動作
- 12. 導入方法 ?取り込み –webからDL ?公式サイトorgithub –bower ?bower install knockout –NuGet ?Install-Package knockoutjs ?CDN –https://cdnjs.com/ –http://www.asp.net/ajax/cdn
- 14. はじめてのばいんでぃんぐ
- 16. バインディングとは ?バインディング（binding） –縛りつける?結びつける ?UIとJSのオブジェクトを結びつける –「代入とは違うのだよ、代入とは！」 ?バインド＝宣言的 ?代入＝手続的
- 17. 例 varuser = { name: "きよくら", age: 20 }; このオブジェクトの値を… こんなHTMLに設定したい…とする
- 18. data-bind属性 ?data-*属性を利用 ?「なにをどこにバインドするか」”宣言” –なにを：JSのオブジェクト –どこに：どの属性 data-bind="value:name"
- 19. ko.applyBindings() ?HTMLと紐づけるオブジェクトを用意 ?ko.applyBindings()で紐づけを実行 ko.applyBindings(user);
- 20. knockoutによるバインディング <scripttype="text/javascript"> $(function() { varuser = { name: "kiyokura", age: 20 }; ko.applyBindings(user); }); </script> <p> name:<inputtype="text"data-bind="value:name" /><br/> age:<inputtype="text"data-bind="value:age" /><br/> </p>
- 21. onemore thing, ?これは「単方向」バインディング –Not “One time” , but “One way” ?UI側の更新が自動的にオブジェクトへ
- 22. 闯厂侧のオブジェクトの値を确认してみる $("#btnCkeck").click( function() { alert(user.age); }); <inputtype="button" value="check"id="btnCkeck"/>
- 24. 単方向バインディング ?オブジェクトをHTMLに結びつける –“代入”ではなく”宣言” –UIの変更が自動的にオブジェクトへ ?依存関係がシンプルに –JSからHTML(DOM)参照が消滅 ?実際は0にならないケースあるが 間違いなく減る
- 25. ごくシンプルな機能だが ?これだけでも有効な場合がある –サーバサイドの比重が大きい場合など、 JSのコード量を減らせる（可能性） –HTMLとJSの依存関係を減らせる ?生産性UP＆保守性UP につながる可能性
- 26. jQueryでやると… <inputtype="text"id="name"/> <inputtype="text"id="age"/> varuser = { name: "kiyokura", age: 20 }; $("#name").val(user.name); $("#age").val(user.age);
- 27. バインディングの基本
- 29. Observable による状態の監視 varuser = { name:ko.observable("kiyokura"), age: ko.observable(20) };
- 30. Observable による状態の監視 varuser = { name:ko.observable("kiyokura"), age: ko.observable(20) };
- 31. オブジェクトを操作してみる $("#btnYounger").click(function() { varage = user.age(); user.age(age -1); }); <inputtype="button" id="btnYounger"value="若返り" />
- 32. オブジェクトの変更が鲍滨へ
- 33. 双方向バインディング ?「監視」という機能 –observableオブジェクトでラップ ?オブジェクトを監視し、UIに通知 –UIを自動更新 ko.observable() ko.observableArray()
- 35. “計算結果”をバインド varUser = function () { varself = this; self.name = ko.observable("kiyokura"); self.age= ko.observable(20); self.message= ko.computed( function() { returnself.name() + ", "+ self.age() + "さい"; }); }; varuser = new User(); <spandata-bind="text:message"></span>
- 36. イベントにメソッドをバインド self.toYounger= function() { varage = user.age(); user.age(age -1); }; <inputtype="button"value="若返り" data-bind="click:toYounger" />
- 38. 双方向バインド ?“監視”と”バインド”のko2大機能で ?オブジェクトとUI双方向で監視?更新 ?“状態”と”コマンド”可能な機構 –これを生かしてPDSの観点で設計?実装 ?それ、MVVMいけるんじゃね
- 39. その他、色々
- 40. いろんなバインディング ?テキストとか表現的な –visible –text –html –css –style –attr
- 41. いろんなバインディング ?制御構文的な –foreach –if –ifnot –with –component
- 42. いろんなバインディング ?フォーム部品関係 –click –event –submit –enable –disable –value
- 43. いろんなバインディング ?フォーム部品関係 –textInput –hasFocus –checked –options –selectedOptions –uniqueName
- 45. カスタマイズや拡張 ?カスタム?バインディング –バインディングをカスタマイズ可能 ?extend –拡張メソッド（みたいな感じ）
- 48. 例：json形式のデータを出し入れ ?先ほどまでの例だと… 「実際つかえるの？」 と思うかもしれません ?ko.observableでイチイチラップしたオ ブジェクトを毎回定義するの？ ?大丈夫、無問題。
- 49. ko.mappingプラグイン ?オブジェクトやJSONを ko.observableでラップされた オブジェクトを生成する varjsData= {name: "foo",age:20}; varvm= ko.mapping.fromJS(jsData);
- 50. ko.mappingプラグイン ?逆にプレーンなオブジェクトにマッピン グしなおすことも可能 varjson= ko.mapping.toJSON(vm);
- 52. 例：WebStorageへの保存機能を後付 ?koは「ちょっとココだけ使う」ことも 比較的楽 ?その一例 –https://github.com/kiyokura/komappingdemo
- 53. 何の変哲もないwebフォーム ?「localStorageに一時保存させて」 と言われたたら？ <form action="register.php" method="post"> <p> 姓: <input type="text" name="lastName" /> 名: <input type="text" name="firstName" /><br/> tel: <input type="text" name="tel" /><br/> e-mail: <input type="text" name="email" /><br/> <hr/> <input type="submit" value="登録" /> </p> </form>
- 54. それ、knockoutで JSからDOMを見てるが、こんな パターンなら別にいいんじゃな いかと思う（个人的には）
- 55. まとめ
- 56. knockoutとは ?UIとオブジェクトの 双方向バインディングを実現する JSライブラリ ?主要機能は監視とバインディング ?"部分利用"から"フレームワーク"まで 場面に応じて利用可能
- 57. knockout とは ?OSS –gihub –MITライセンス ?依存関係もシンプル –ほかのJSライブラリに依存しない –サーバサイドのテクノロジにも依存しない ?（RubyでもPHPでも.NETでも）
- 58. 個人的な感想 ?つまみ食いしやすい –アプリのアーキテクチャに食い込まない （ような使い方が可能） ?サーバサイドのフレームワークとも 相性がいいと思う –学習コストが低い
- 59. 参考?リソース
- 60. 公式サイト ?http://knockoutjs.com/ ?ドキュメントとチュートリアルが充実 –ここの情報だけだいたいどうにかなる –チュートリアルもとっつきが良い
- 61. おすすめ資料 ?『Knockout.jsの概要』 –by MayukiSawatari –https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao ?knockoutの二大機能の仕組みを丁寧にわか りやすく解説。おすすめ。 ?動画もあります。 –https://www.youtube.com/watch?v=U- TRaV3IU6A
- 62. 気軽に試すならjsfiddleで ?http://jsfiddle.net/ ?ブラウザでJavaScriptを試せる –保存やシェアもできるよ ?メジャーなライブラリを標準サポート –knockoutも対応
- 63. 番外編-JSFiddleのポイント（？） ?jQueryとknockoutを使うなら –［Frameworks & Extensions］ ?jQueryを選択 –［External Resources］ ?knockoutのCDNを指定 –http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout- min.js
- 64. ご清聴ありがとうございました