knockout.js 入門 - 鬼畜編

Transcript

1. knockout.js 入門 - 鬼畜編 しばやん (@shibayan)
2. About  しばやん (@shibayan)  ピュア紳士  STEINS;GATE と Ever17 が好き  C# と ASP.NET MVC が好き  3/31 までは ASP.NET/IIS の MVP
3. Introduction Knockout  HTML と JavaScript で MVVM  はっきりいって、よくわからない  公式の Core Concepts  Declarative Bindings  Automatic UI Refresh  Dependency Tracking  Templating
4. Declarative Bindings  data-bind 属性を利用した、宣言的な バインディング定義
5. Automatic UI Refresh  モデルの値が変更された時、自動的 に UIを更新
6. Dependency Tracking  モデル間の依存関係を自動的に追跡 lastName と firstName のどちらかが変更された 場合でも、このプロパティの変更通知が飛ぶ
7. Templating  モデルの値から UI 要素を動的に生成 template
8. Subscribable  ko.subscribable  subscribe  getSubscriptionCount  extend  Observables は Subscribable を継承  値の変更を検知可能
9. Observables  ko.observable  ko.observableArray  ko.computed ko.observable("initial value") ko.observableArray([ 1, 2, 3, 4, 5 ]); ko.computed(function () { return this.lastName() + " " + this.firstName(); }, viewModel);
10. ViewModel(1)  Object Literal var viewModel = { firstName: ko.observable(), lastName: ko.observable() }; viewModel.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); }, viewModel);
11. ViewModel(2)  Function function MyViewModel() { var self = this; self.firstName = ko.observable(); self.lastName = ko.observable(); self.fullName = ko.computed(function () { return self.lastName() + " " + self.firstName(); }); }
12. Fluent Interface  setter は所属する ViewModel を返す var viewModel = { firstName: ko.observable(), lastName: ko.observable() }; viewModel.lastName("鳳凰院").firstName("凶真");
13. Activating  ko.applyBindings // 全ての要素を対象にする ko.applyBindings(viewModel); // #elementId 以下の要素を対象にする ko.applyBindings(viewModel, document.getElementById("elementId"));
14. Bulit-in Bindings - Text  text  html <span data-bind="text: content"></span> <span data-bind="html: content"></span>
15. Built-in Bindings - Appearance  visible  css  style  attr <ul data-bind="visible: hasMessages"></ul> <ul data-bind="css: { myClass: hasMessages }"></ul> <span data-bind="style: { color: newColor }"></span> <img data-bind="attr: { src: imageUrl }" />
16. Built-in Bindings - Event  click  event  submit <a href="#" data-bind="click: handler">click me</a> <div data-bind="event: { mouseover: handler }"></div> <form data-bind="submit: handler"></form>
17. Built-in Bindings - Control Flow  foreach  if / ifnot  with <ul data-bind="foreach: items"> <li data-bind="text: name"></li> </ul> <span data-bind="if: hasError">Error</span> <div data-bind="with: firstModel">...</div> <div data-bind="with: secondModel">...</div>
18. Built-in Bindings – Forms(1)  value  checked  options <input type="text" data-bind="value: firstName" /> <input type="checkbox" data-bind="checked: isEnabled" /> <select data-bind="options: categories"></select>
19. Built-in Bindings – Forms(2)  selectedOptions  enable / disable  hasfocus <input type="text" data-bind="enable: hasMessage" /> <input type="text" data-bind="hasfocus: isEditable" / <select data-bind="selectedOptions: items">...</select>
20. Demo(1)  基本的な knockout.js の使い方  Observables  ViewModel  Built-in Bindings
21. Custom Bindings  ko.bindingHandlers ko.bindingHandlers.fadeVisible = { init: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).toggle(value); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); if (value) $(element).fadeIn(); else $(element).fadeOut(); } };
22. Unobtrusive Event Handling  ko.dataFor  ko.contextFor var data = ko.dataFor(domElement); var context = ko.contextFor(domElement); // context.($data/$parent/$parents/$root) $(".selector").live("click", function() { // ko.dataFor/contextFor });
23. Extenders  ko.extenders  throttle  指定した時間を経過した時だけ、変更イ ベントを発火する ko.extenders.myExtender = function(target, option) { // target = observable, option: parameter }; var viewModel = { searchTerms: ko.observable() .extend({ throttle: 500 }) };
24. Demo(2)  高度な使い方を試す  Custom Bindings  Unobtrusive Event Handling  Extenders
25. References  Knockout  http://knockoutjs.com/  Steve Sanderson’s blog  http://blog.stevensanderson.com/  Knock Me Out  http://www.knockmeout.net/