knockout.js 入門 - 鬼畜編

16,136 views
15,751 views

Published on

Published in: Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,136
On SlideShare
0
From Embeds
0
Number of Embeds
4,836
Actions
Shares
0
Downloads
0
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide

knockout.js 入門 - 鬼畜編

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

×