0
@hakurai
What is knockout?✤   JavaScriptでMVVMを実現するフレームワーク
✤   というわけで今日はJavaScriptのおはなし
What is MVVM?✤   MVVMはGUIのアーキテクチャパターンの一つ    ✤   MVCとかMVPとか...✤   Model - Veiw - ViewModel
MVVMではViewを直接操作しない✤   えっ✤   画面表示はどうやって更新するの?
ViewModelを操作する✤   ViewModelはViewの抽象表現✤   バインディングを使用してViewとViewModelを同期する
だいたいこんな感じ     View        ViewModelの描画            同期   ViewModel     Viewの状態とロジック    Model        その他
つかいかた
ボタンクリックで文字を表示
ViewModelを定義する  var viewModel = {};  viewModel.message = ko.observable();  viewModel.clickAction = function(){     viewMod...
ViewModelにプロパティを追加  var viewModel = {};  viewModel.message = ko.observable();  viewModel.clickAction = function(){     vie...
最後にViewとバインド  var viewModel = {};  viewModel.message = ko.observable();  viewModel.clickAction = function(){     viewModel...
Viewのコード <body> <input type="button" value="click here!"> <div></div> </body>
data-bind属性を追加する                                                 イベントに対応する関数 <body> <input type="button" data-bind="click:...
こんな感じにバインド  View               ViewModel         viewModel.clickAction = function(){            viewModel.message(hello wo...
1.イベントと紐付いた関数が呼ばれる  View               ViewModel         viewModel.clickAction = function(){            viewModel.message(...
2.ViewModelのプロパティを変更   View                ViewModel           viewModel.clickAction = function(){              viewModel....
3.自動でViewを更新  View                 ViewModel           viewModel.clickAction = function(){              viewModel.message(...
ちなみにjQueryだと...            セレクタ $(‘input’).on(‘click’, function(){     $(‘div’).text(‘hello world!’); });                セ...
大きくて複雑なHTMLの場合✤   複雑なjQueryのセレクタ    ✤   セレクタを書くためだけのidとclass✤   コード内にあふれるイベント登録、セレクタ、DOM操作
よくある感じのコード                   セレクタ var editorCache = $(‘#hoge div.editor’);       イベント登録 editorCache.find(‘[type=”button”]’)...
本質的ではないコードで見通しが悪い✤   前のサンプルで実現したいこと    ✤   ボタンがクリックされたらメッセージを表示する
あらためてknockoutを使ったコード viewModel.clickAction = function(){    viewModel.message(hello world!); };
knockoutを使うメリット✤   Viewの抽象表現であるViewを定義することで    ✤   View(DOM)の構造の影響が少ない    ✤   idとかclassとか親子関係とか    ✤   data-bind属性だけ書いておけば...
デメリット✤   他のjQueryプラグインとかとの組み合わせ    ✤   data-bind属性書けないし...    ✤   カスタムバインディングでなんとかできるけど面倒
機能紹介
Observables✤   observable    ✤   値が変更されたらViewと同期✤   observableArray    ✤   オブジェクトが追加・削除されたら通知✤   computed
observableをいつ使うか✤   ViewとViewModelで状態を同期するプロパティ    ✤   Viewが変更されたらViewModelを更新(一部のバインディング)    ✤   ViewModelが変更されたらViewを更新
observableArray✤   foreachとあわせて使う場合がほとんど    ✤   要素が増えたらテーブルの行を追加とか
テキストと外見に関するbindその1✤   visible    ✤   要素の表示・非表示✤   text    ✤   要素のテキスト✤   html    ✤   要素のinnerHTML
テキストと外見に関するbindその2✤   css    ✤   クラス属性の追加・削除✤   style    ✤   要素のスタイルを設定✤   attr    ✤   属性を設定
foreachの使い方                                       observableArray                                        のプロパティ <ul data-b...
foreachとアニメーション✤   オブジェクトの追加後、削除前に呼び出す関数を設定できる    ✤   afterAdd    ✤   beforeRemove✤   ここにアニメーションのコードを書く    ✤   jQueryのfade...
Upcoming SlideShare
Loading in...5
×

Knockout

1,330

Published on

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,330
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • what is mvvm?\neverybody know MVC pattern.\nlike mvc.\nmvvm is an architectual pattern.\n
  • \n
  • \n
  • view perform only display control. labels,buttons,textareas and so on.\nviewmodel is abstraction of view.\nIt has view state and logic.\ndata binding is used between view and viewmodel\n\nmodel, it&apos;s like domain model.\nmodel has bussines model and logic.\n
  • \n
  • \n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • show example.\n\nthis span tag is binding to myMessage.\nthis text is changed a new text when you change myMessage of view model.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Knockout"

    1. 1. @hakurai
    2. 2. What is knockout?✤ JavaScriptでMVVMを実現するフレームワーク
    3. 3. ✤ というわけで今日はJavaScriptのおはなし
    4. 4. What is MVVM?✤ MVVMはGUIのアーキテクチャパターンの一つ ✤ MVCとかMVPとか...✤ Model - Veiw - ViewModel
    5. 5. MVVMではViewを直接操作しない✤ えっ✤ 画面表示はどうやって更新するの?
    6. 6. ViewModelを操作する✤ ViewModelはViewの抽象表現✤ バインディングを使用してViewとViewModelを同期する
    7. 7. だいたいこんな感じ View ViewModelの描画 同期 ViewModel Viewの状態とロジック Model その他
    8. 8. つかいかた
    9. 9. ボタンクリックで文字を表示
    10. 10. ViewModelを定義する var viewModel = {}; viewModel.message = ko.observable(); viewModel.clickAction = function(){ viewModel.message(hello world!); }; ko.applyBindings(viewModel);
    11. 11. ViewModelにプロパティを追加 var viewModel = {}; viewModel.message = ko.observable(); viewModel.clickAction = function(){ viewModel.message(hello world!); }; ko.applyBindings(viewModel);
    12. 12. 最後にViewとバインド var viewModel = {}; viewModel.message = ko.observable(); viewModel.clickAction = function(){ viewModel.message(hello world!); }; ko.applyBindings(viewModel);
    13. 13. Viewのコード <body> <input type="button" value="click here!"> <div></div> </body>
    14. 14. data-bind属性を追加する イベントに対応する関数 <body> <input type="button" data-bind="click: clickAction" value="click here!"> <div data-bind="text: message"></div> </body> テキストにmessageの 内容を表示
    15. 15. こんな感じにバインド View ViewModel viewModel.clickAction = function(){ viewModel.message(hello world!); }; viewModel.message = ko.observable();
    16. 16. 1.イベントと紐付いた関数が呼ばれる View ViewModel viewModel.clickAction = function(){ viewModel.message(hello world!); }; viewModel.message = ko.observable();
    17. 17. 2.ViewModelのプロパティを変更 View ViewModel viewModel.clickAction = function(){ viewModel.message(hello world!); }; viewModel.message = ko.observable(); hello world!
    18. 18. 3.自動でViewを更新 View ViewModel viewModel.clickAction = function(){ viewModel.message(hello world!); }; viewModel.message = ko.observable(); hello world!
    19. 19. ちなみにjQueryだと... セレクタ $(‘input’).on(‘click’, function(){ $(‘div’).text(‘hello world!’); }); セレクタ
    20. 20. 大きくて複雑なHTMLの場合✤ 複雑なjQueryのセレクタ ✤ セレクタを書くためだけのidとclass✤ コード内にあふれるイベント登録、セレクタ、DOM操作
    21. 21. よくある感じのコード セレクタ var editorCache = $(‘#hoge div.editor’); イベント登録 editorCache.find(‘[type=”button”]’).on(‘click’, function(){ セレクタeditorCache.find(‘div.message’).text(‘hello world!’); }); セレクタ DOM操作
    22. 22. 本質的ではないコードで見通しが悪い✤ 前のサンプルで実現したいこと ✤ ボタンがクリックされたらメッセージを表示する
    23. 23. あらためてknockoutを使ったコード viewModel.clickAction = function(){ viewModel.message(hello world!); };
    24. 24. knockoutを使うメリット✤ Viewの抽象表現であるViewを定義することで ✤ View(DOM)の構造の影響が少ない ✤ idとかclassとか親子関係とか ✤ data-bind属性だけ書いておけばおっけー
    25. 25. デメリット✤ 他のjQueryプラグインとかとの組み合わせ ✤ data-bind属性書けないし... ✤ カスタムバインディングでなんとかできるけど面倒
    26. 26. 機能紹介
    27. 27. Observables✤ observable ✤ 値が変更されたらViewと同期✤ observableArray ✤ オブジェクトが追加・削除されたら通知✤ computed
    28. 28. observableをいつ使うか✤ ViewとViewModelで状態を同期するプロパティ ✤ Viewが変更されたらViewModelを更新(一部のバインディング) ✤ ViewModelが変更されたらViewを更新
    29. 29. observableArray✤ foreachとあわせて使う場合がほとんど ✤ 要素が増えたらテーブルの行を追加とか
    30. 30. テキストと外見に関するbindその1✤ visible ✤ 要素の表示・非表示✤ text ✤ 要素のテキスト✤ html ✤ 要素のinnerHTML
    31. 31. テキストと外見に関するbindその2✤ css ✤ クラス属性の追加・削除✤ style ✤ 要素のスタイルを設定✤ attr ✤ 属性を設定
    32. 32. foreachの使い方 observableArray のプロパティ <ul data-bind="foreach: members"> <li data-bind="text: $data"></li> </ul> 繰り返す部分
    33. 33. foreachとアニメーション✤ オブジェクトの追加後、削除前に呼び出す関数を設定できる ✤ afterAdd ✤ beforeRemove✤ ここにアニメーションのコードを書く ✤ jQueryのfadeInとかhide(‘normal’)とか
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×