Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
作って分かる
KnockoutJS
2013/11/19(火)
@ALM 11月
自己紹介
KLab株式会社
エンジニア

上田拓也
Go, JavaScript, Java,
twitter : @tenntenn

PHP
アジェンダ
● KnockoutJSとは?
● バインディングの仕組み
● 実装してみた
KnockoutJSとは?
KnockoutJSとは?
● JavaScriptのMVVMフレームワーク
○ MVVM: Model-View-ViewModel

● ViewModel(VM)とDOMの要素を双方向バイン
ドする機能を提供する
バインド
ViewMod...
KnockoutJSの特徴
● コールバックが少なくなる
● 他のフレームワークと一緒に使える
○ 提供しているのはバインディングだけ
○ 既存のプロジェクトに投入しやすい(かも)

● 独自タグを使っていない
○ data-bind属性かコメ...
KnockoutJSの双方向バインド
(1)ViewModel → Element
ViewModel
{
firstName: ‘Foo’,
lastName: ‘Bar’
}

Element

バインド

<input value=”Fo...
KnockoutJSの双方向バインド
(1)ViewModel → Element
ViewModel
{
firstName: ‘Piyo’,
lastName: ‘Hoge’
}

Element

バインド

<input value=”...
KnockoutJSの双方向バインド
(1)ViewModel → Element
ViewModel
{
firstName: ‘Piyo’,
lastName: ‘Hoge’
}

Element

バインド <input value=”P...
KnockoutJSの双方向バインド
(2)ViewModel ← Element
ViewModel
{
firstName: ‘Foo’,
lastName: ‘Bar’
}

Element

バインド

<input value=”Fo...
KnockoutJSの双方向バインド
(2)ViewModel ← Element
ViewModel
{
firstName: ‘Foo’,
lastName: ‘Bar’
}

Element

バインド <input value=”Piy...
KnockoutJSの双方向バインド
(2)ViewModel ← Element
ViewModel
{
firstName: ‘Piyo’,
lastName: ‘Hoge’
}

Element

バインド <input value=”P...
KnockoutJSの使用例
■HTML
<input data-bind=”value:firstName”>
<input data-bind=”value:lastName”>
■JavaScript
var vm = {
firstNa...
いろいろなバインディング
● cssバインド
<div data-bind=”css: {error, isError}”></div>
● if/ifnotバインド
<!-- ko if: ok -->OK<!-- /ko-->

● for...
カスタムバインド
● 独自バインドを作ることができる
ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor,
allBindings, view...
ko.computed
(ko.dependentObservable)
● 他observable(subscribable)に依存した
observableを作れる
var a = ko.observable(100);
var c = k...
バインディングの仕組み
バインディングの仕組み
●

KnockoutJSのバインディングの仕組
みをソースコードを読んでみて理解する
対象とするもの
● ko.subscribable(ko.subscription)
● ko.observable
● ko.dependencyDetection
● ko.dependentObservable(ko.
computed)...
ko.subscribable
ko.subscribable
-----------------------------+subscribe()
+notifySubscripters()

ko.observable

ko.depende...
ko.computed
(ko.dependentObservable)
● 他observable(subscribable)に依存した
observableを作れる
var a = ko.observable(100);
var c = k...
ko.observable(ko.subscribable)
ko.observable
(ko.subscribable)

subscripter

subscript

Write

notifySubscripters

callbac...
ko.dependenctyDetectionと
ko.dependentObservable
ko.
dependentObserva
ble
Init

ko.
dependencyDet
ection

ko.subscribable

...
実装してみた
実装してみた
●

さらに簡単に実装してみて理解する

● エラー処理や難しいことは省く
http://jsfiddle.net/uedatakuya/9hS5n/
【解説】実装してみた
● https://gist.github.
com/tenntenn/7540535
● http://jsfiddle.
net/uedatakuya/9hS5n/
Upcoming SlideShare
Loading in …5
×

作って分かるKnockoutJS@ALM11月

2,319 views

Published on

社内勉強会で発表したスライドです。

Published in: Technology
  • Be the first to comment

作って分かるKnockoutJS@ALM11月

  1. 1. 作って分かる KnockoutJS 2013/11/19(火) @ALM 11月
  2. 2. 自己紹介 KLab株式会社 エンジニア 上田拓也 Go, JavaScript, Java, twitter : @tenntenn PHP
  3. 3. アジェンダ ● KnockoutJSとは? ● バインディングの仕組み ● 実装してみた
  4. 4. KnockoutJSとは?
  5. 5. KnockoutJSとは? ● JavaScriptのMVVMフレームワーク ○ MVVM: Model-View-ViewModel ● ViewModel(VM)とDOMの要素を双方向バイン ドする機能を提供する バインド ViewModel Element
  6. 6. KnockoutJSの特徴 ● コールバックが少なくなる ● 他のフレームワークと一緒に使える ○ 提供しているのはバインディングだけ ○ 既存のプロジェクトに投入しやすい(かも) ● 独自タグを使っていない ○ data-bind属性かコメントを使う ○ でもdata-bind属性が大きくなりすぎる ■ <div data-bind=”abind: avalue, cbind: cvalue,...”> ● 割りと重い ○ モバイル用途だと若干重い
  7. 7. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  8. 8. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  9. 9. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  10. 10. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  11. 11. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  12. 12. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  13. 13. KnockoutJSの使用例 ■HTML <input data-bind=”value:firstName”> <input data-bind=”value:lastName”> ■JavaScript var vm = { firstName: ko.observable(“Foo”), lastName: ko.observable(“Bar”) }; ko.applyBindings(vm, document.body); http://jsfiddle.net/uedatakuya/ma43x/
  14. 14. いろいろなバインディング ● cssバインド <div data-bind=”css: {error, isError}”></div> ● if/ifnotバインド <!-- ko if: ok -->OK<!-- /ko--> ● foreachバインド <ol data-bind=”foreach: items”> <li data-bind=”text:$data.name”></li> </ol> http://knockoutjs.com/documentation/introduction.html
  15. 15. カスタムバインド ● 独自バインドを作ることができる ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { } } <div data-bind=”yourBindingName: someValue”></div> http://knockoutjs.com/documentation/custom-bindings.html
  16. 16. ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a = ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
  17. 17. バインディングの仕組み
  18. 18. バインディングの仕組み ● KnockoutJSのバインディングの仕組 みをソースコードを読んでみて理解する
  19. 19. 対象とするもの ● ko.subscribable(ko.subscription) ● ko.observable ● ko.dependencyDetection ● ko.dependentObservable(ko. computed) http://jsfiddle.net/uedatakuya/9hS5n/
  20. 20. ko.subscribable ko.subscribable -----------------------------+subscribe() +notifySubscripters() ko.observable ko.dependentObservable (ko.computed) http://jsfiddle.net/uedatakuya/9hS5n/
  21. 21. ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a = ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
  22. 22. ko.observable(ko.subscribable) ko.observable (ko.subscribable) subscripter subscript Write notifySubscripters callback http://jsfiddle.net/uedatakuya/9hS5n/
  23. 23. ko.dependenctyDetectionと ko.dependentObservable ko. dependentObserva ble Init ko. dependencyDet ection ko.subscribable evaluateImediate begin Read registerDependency callback <依存関係に追加> end http://jsfiddle.net/uedatakuya/9hS5n/
  24. 24. 実装してみた
  25. 25. 実装してみた ● さらに簡単に実装してみて理解する ● エラー処理や難しいことは省く http://jsfiddle.net/uedatakuya/9hS5n/
  26. 26. 【解説】実装してみた ● https://gist.github. com/tenntenn/7540535 ● http://jsfiddle. net/uedatakuya/9hS5n/

×