knockout.js 入門 - 鬼畜編 しばやん (@shibayan) 

About  しばやん (@shibayan)  ピュア紳士  STEINS;GATE と Ever17 が好き  C# と ASP.NET MVC が好き  3/31 までは ASP.NET/IIS の MVP 

Introduction Knockout  HTML と JavaScript で MVVM  はっきりいって、よくわからない  公式の Core Concepts  Declarative Bindings  Automatic UI Refresh  Dependency Tracking  Templating 

Declarative Bindings  data-bind 属性を利用した、宣言的な バインディング定義 

Automatic UI Refresh  モデルの値が変更された時、自動的 に UIを更新 

Dependency Tracking  モデル間の依存関係を自動的に追跡 lastName と firstName のどちらかが変更された 場合でも、このプロパティの変更通知が飛ぶ 

Templating  モデルの値から UI 要素を動的に生成 template 

Subscribable  ko.subscribable  subscribe  getSubscriptionCount  extend  Observables は Subscribable を継承  値の変更を検知可能 

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); 

ViewModel(1)  Object Literal var viewModel = { firstName: ko.observable(), lastName: ko.observable() }; viewModel.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); }, viewModel); 

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(); }); } 

Fluent Interface  setter は所属する ViewModel を返す var viewModel = { firstName: ko.observable(), lastName: ko.observable() }; viewModel.lastName("鳳凰院").firstName("凶真"); 

Activating  ko.applyBindings // 全ての要素を対象にする ko.applyBindings(viewModel); // #elementId 以下の要素を対象にする ko.applyBindings(viewModel, document.getElementById("elementId")); 

Bulit-in Bindings - Text  text  html 

Built-in Bindings - Appearance  visible  css  style  attr



Built-in Bindings - Event  click  event  submit click me 

Built-in Bindings - Control Flow  foreach  if / ifnot  with

Error 

Built-in Bindings – Forms(1)  value  checked  options 

Built-in Bindings – Forms(2)  selectedOptions  enable / disable  hasfocus ... 

Demo(1)  基本的な knockout.js の使い方  Observables  ViewModel  Built-in Bindings 

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(); } }; 

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 }); 

Extenders  ko.extenders  throttle  指定した時間を経過した時だけ、変更イ ベントを発火する ko.extenders.myExtender = function(target, option) { // target = observable, option: parameter }; var viewModel = { searchTerms: ko.observable() .extend({ throttle: 500 }) }; 

Demo(2)  高度な使い方を試す  Custom Bindings  Unobtrusive Event Handling  Extenders 

References  Knockout  http://knockoutjs.com/  Steve Sanderson’s blog  http://blog.stevensanderson.com/  Knock Me Out  http://www.knockmeout.net/