Knockout

1,727 views

Published on

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,727
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
20
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'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
  • 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’)とか

    ×