Knockout.jsの概要

 Knockout.jsの概要

Knockout.jsの概要 (3つのMVC系人気フレームワーク、Backbone.js/AngularJS/Knockout.js) - Build Insider Offline #1

Sample Code: http://mayuki.github.io/Sample/BuildInsiderOffline-1/
PDF: http://sdrv.ms/11qcEWc
PowerPoint: http://sdrv.ms/15GZzfu

1fe26e11357f3ba7250b6668ca61309f?s=128

Mayuki Sawatari

June 08, 2013
Tweet

Transcript

  1. Knockout.js Mayuki Sawatari (@mayuki)

  2. About Me

  3. Simplify dynamic JavaScript UIs by applying the Model- View-ViewModel(MVVM)

  4. Model View View Model (ViewModel) MVVM ugaya40 Knockout.js ViewModel View

  5. Knockout.js View ( HTML/DOM) ViewModel Model (JavaScript )

  6. Observable MIT License

  7. Seven Sanderson ASP .NET MVC ( )

  8. Windows Azure ( )

  9. None
  10. None
  11. Knockout.js 2 1 observe ( ) + able ( )

  12. var

  13. ko.observable setter/getter var var // //

  14. function this

  15. None
  16. function this // => 1 // alert!

  17. (Array) ko.observable setter/getter (push,pop ) var 'hoge' 'fuga' var //

    'hauhau' 'gaogao' // 'maumau' //
  18. function this 'hauhau' // alert!

  19. ko.computed observable

  20. var ' ' var ' ' var function return //

    => 'S' // value1 ’S’ // => S
  21. subscribe

  22. var ' ' // var ' ' var function return

    function // => ' ' // observable // ‘ ’ ' ' // // =>
  23. ko.observable subscribe ko.computed observable getter setter

  24. None
  25. Knockout.js 2 2 (ko.subscribable) HTML DOM data-bind

  26. View Model JavaScript function ViewModel () { this.lastName = ko.observable('

    '); this.firstName = ko.observable(' '); this.fullName = ko.computed(function () { return this.lastName() + this.firstName(); }, this); }
  27. HTML (data-bind ) div id target input type text data-bind

    value: lastName input type text data-bind value: firstName span data-bind text: fullName /span div
  28. JavaScript var new '#target'

  29. None
  30. DOM

  31. None
  32. div data-bind myBinding: data div

  33. None
  34. Knockout.js Windows WinJS

  35. None