Suche senden
Hochladen
実践Knockout
•
14 gefällt mir
•
2,977 views
Kazuhiro Eguchi
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 61
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Knockout_エンジニア勉強会20131120
Knockout_エンジニア勉強会20131120
エンジニア勉強会 エスキュービズム
Html5 Web Applications
Html5 Web Applications
totty jp
BSDカーネル メモリ管理 共有メモリ
BSDカーネル メモリ管理 共有メモリ
Yutaka Matsuzawa
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
CoreData 非同期データ処理
CoreData 非同期データ処理
次朗 永島
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
次朗 永島
Spring Data in a Nutshell
Spring Data in a Nutshell
Tsuyoshi Miyake
Empfohlen
Knockout_エンジニア勉強会20131120
Knockout_エンジニア勉強会20131120
エンジニア勉強会 エスキュービズム
Html5 Web Applications
Html5 Web Applications
totty jp
BSDカーネル メモリ管理 共有メモリ
BSDカーネル メモリ管理 共有メモリ
Yutaka Matsuzawa
ゆるべん Webアプリ開発概要 20130127
ゆるべん Webアプリ開発概要 20130127
Y
CoreData 非同期データ処理
CoreData 非同期データ処理
次朗 永島
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
RestKitの紹介 - Webサービスのクライアント実装補助フレームワーク -
次朗 永島
Spring Data in a Nutshell
Spring Data in a Nutshell
Tsuyoshi Miyake
20061125
20061125
小野 修司
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
kunihikokaneko1
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
takezoe
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
Django boodoo
Django boodoo
泰 増田
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
20101110 Tech02 ID 管理およびサービスの設定
20101110 Tech02 ID 管理およびサービスの設定
kumo2010
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Jqm20120210
Jqm20120210
cmtomoda
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
120331 silverlight5新機能早めぐり
120331 silverlight5新機能早めぐり
Takayoshi Tanaka
SocialWeb Conference vol.5 OpenSocial Night #2
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
Haxe
Haxe
Kazuhiro Eguchi
JavaFX8
JavaFX8
Kazuhiro Eguchi
Weitere ähnliche Inhalte
Ähnlich wie 実践Knockout
20061125
20061125
小野 修司
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
kunihikokaneko1
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
Kazuki Nakajima
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
takezoe
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Akio Katayama
Django boodoo
Django boodoo
泰 増田
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
20101110 Tech02 ID 管理およびサービスの設定
20101110 Tech02 ID 管理およびサービスの設定
kumo2010
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Jqm20120210
Jqm20120210
cmtomoda
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
なべ
120331 silverlight5新機能早めぐり
120331 silverlight5新機能早めぐり
Takayoshi Tanaka
SocialWeb Conference vol.5 OpenSocial Night #2
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
Ähnlich wie 実践Knockout
(20)
20061125
20061125
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
FxUG in Toyama - ASphalt2 container -
Django boodoo
Django boodoo
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
scala+liftで遊ぼう
scala+liftで遊ぼう
20101110 Tech02 ID 管理およびサービスの設定
20101110 Tech02 ID 管理およびサービスの設定
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Jqm20120210
Jqm20120210
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
HTML5 on ASP.NET
HTML5 on ASP.NET
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Spring bootでweb セキュリティ(ログイン認証)編
Spring bootでweb セキュリティ(ログイン認証)編
120331 silverlight5新機能早めぐり
120331 silverlight5新機能早めぐり
SocialWeb Conference vol.5 OpenSocial Night #2
SocialWeb Conference vol.5 OpenSocial Night #2
Mehr von Kazuhiro Eguchi
Haxe
Haxe
Kazuhiro Eguchi
JavaFX8
JavaFX8
Kazuhiro Eguchi
なれる!クラスローダー
なれる!クラスローダー
Kazuhiro Eguchi
Knockout
Knockout
Kazuhiro Eguchi
Java 並行処理の基礎update1
Java 並行処理の基礎update1
Kazuhiro Eguchi
Starting java fx
Starting java fx
Kazuhiro Eguchi
並行処理プログラミングの深淵~Java仮想マシン仕様 スレッドとロック~
並行処理プログラミングの深淵~Java仮想マシン仕様 スレッドとロック~
Kazuhiro Eguchi
Automate the Swing application testing
Automate the Swing application testing
Kazuhiro Eguchi
Mehr von Kazuhiro Eguchi
(8)
Haxe
Haxe
JavaFX8
JavaFX8
なれる!クラスローダー
なれる!クラスローダー
Knockout
Knockout
Java 並行処理の基礎update1
Java 並行処理の基礎update1
Starting java fx
Starting java fx
並行処理プログラミングの深淵~Java仮想マシン仕様 スレッドとロック~
並行処理プログラミングの深淵~Java仮想マシン仕様 スレッドとロック~
Automate the Swing application testing
Automate the Swing application testing
Kürzlich hochgeladen
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Kürzlich hochgeladen
(11)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
実践Knockout
1.
実践 knockout
@hakurai
2.
自己紹介 • hakurai • Backlog開発チーム@ヌーラボ •
関ジャバ • hoge駆動 • 奈良模型愛好会
3.
1/10 新機能リリース!
4.
knockoutをフル活用しました
5.
KNOCKOUTについて • JavaScriptでMVVMを実現するフレームワーク •
jQueryには依存していない • サポートブラウザ • IE 6+, Firefox 2+, Chrome, Safari, others
6.
KNOCKOUTのコンセプト • 宣言型データバインディング • UIの自動更新 •
依存性追跡 • テンプレート
7.
宣言型データバインディング • HTMLの要素とJavaScriptの値を結びつける •
data-bind属性を要素に追加するだけ
8.
data-bindの例 • div要素のテキストと
vm.message の値をバインド <div data-bind="text: message"></div> vm = { message: hello world! }; ko.applyBindings(vm);
9.
hello world!を表示する例 <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script> </head> <body> <div data-bind="text: message"></div> <script type="text/javascript" src="script.js"></script> </body> </html> (function(){ var vm = { message: 'hello world!' }; ko.applyBindings(vm); }());
10.
step1 data-bind属性を設定 <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script> </head> <body> <div data-bind="text: message"></div> <script type="text/javascript" src="script.js"></script> </body> </html> (function(){ var vm = { message: 'hello world!' }; ko.applyBindings(vm); }());
11.
step2 ViewModelを定義 <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script> </head> <body> <div data-bind="text: message"></div> <script type="text/javascript" src="script.js"></script> </body> </html> (function(){ var vm = { message: 'hello world!' }; ko.applyBindings(vm); }());
12.
step3 ViewとViewModelをバインド <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script> </head> <body> <div data-bind="text: message"></div> <script type="text/javascript" src="script.js"></script> </body> </html> (function(){ var vm = { message: 'hello world!' }; ko.applyBindings(vm); }());
13.
6種類+ のbinding • visible
binding • style binding • text binding • attr binding • html binding • custom binding • css binding
14.
visible binding • 要素の表示・非表示の切り替え •
いわゆるdisplay:noneのon/offの切り替え • オブジェクトがtrueまたはnon-nullなら表示 • false, 0, null undefinedなら非表示 <div data-bind="visible: showMsg">hello world!</div>
15.
text binding • オブジェクトをテキストとして要素に設定
<div data-bind="text: message"></div>
16.
html binding • オブジェクトをinnerHTMLとして要素に設定
<div data-bind="html: message"></div> vm = { message: <strong>hello world!</strong> };
17.
css binding • 要素のclassの追加・削除 •
オブジェクトがtrueならclassを追加 • falseならclassを削除 <div data-bind="css:{selected: status}"></div> vm = { status: true };
18.
trueならclassを追加 <div data-bind="css:{selected: status}"></div>
vm = { status: true }; <div class= selected ></div>
19.
falseならclassを削除 <div data-bind="css:{selected: status}"></div>
vm = { status: false }; <div></div>
20.
複数指定もできます <div data-bind="css:{selected: status,
warn: over}"></div> vm = { status: true, over: true }; <div class= selected over ></div>
21.
style binding • 要素のstyleを設定 •
css bindingがあるので余り使わないかも <div data-bind="style:{color: bg}"></div> vm = { bg: red };
22.
style bindingの注意点 • スタイル名に-(ハイフン)は使えない •
キャメルケースに書き換える • font-weight → fontWeight • text-decoration → textDecoration
23.
attr binding • 要素の属性を設定 •
hrefとかsrcとか <a data-bind="attr:{href: url}"></a> vm = { url: http://www.backlog.jp/ };
24.
custom binding • 好きな名前でbindingを自分で作れる •
これまで紹介したbindingも同じ仕組でできている <div data-bind="hoge: message"></div> ko.bindingHandlers.hoge = { init: function(){}, update: function(){} };
25.
UIの自動更新 • UIとオブジェクトの状態を同期する • オブジェクトを同期するko.observable •
配列を同期するko.observableArray
26.
UIの自動更新 • ko.observableを使用していないプロパティは同期さ れない
同期されない vm = { name: aoshima , age: ko.observable(25) }; 同期される
27.
最初のバインド • ko.applyBindingsの呼び出し時の値でバインドされ る vm
= { name: aoshima , age: ko.observable(25) }; aoshima 25 ko.applyBindings(vm); name = hasegawa ; age(26);
28.
値の更新 • nameはko.observableでラップされていない • 値が変わっても更新されない
vm = { name: aoshima , age: ko.observable(25) }; aoshima 25 ko.applyBindings(vm); name = hasegawa ; age(26);
29.
値の更新 • ageはko.observableでラップされている • 値が変わると自動的に更新される
vm = { name: hakurai , age: ko.observable(25) }; aoshima 26 ko.applyBindings(vm); name = hasegawa ; age(26);
30.
依存関係追跡 • オブジェクト同士に依存関係を持たせる • ko.computed
• 別のko.observableの値が変更されると更新される
31.
依存関係追跡 • ko.computedに渡した関数内のko.observableの値が 更新されるとko.computedの値も更新される
function vm(){ this.firstName =ko.observable('Bob'); this.lastName =ko.observable('Smith'); this.fullName = ko.computed(function () { return this.firstName() + " " + this.lastName(); }, this); }
32.
テンプレート • テンプレートを利用してオブジェクトを表示する
<div data-bind="template: { name: 'person-template', data: buyer }"></div> <div data-bind="template: { name: 'person-template', data: seller }"></div> <script type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Credits: <span data-bind="text: credits"></span></p> </script> vm = { buyer: { name: 'Franklin', credits: 250 }, seller: { name: 'Mario', credits: 5800 } }
33.
<div data-bind="template: {
name: 'person-template', data: buyer }"> <h3 data-bind="text: name">Franklin</h3> <p>Credits: <span data-bind="text: credits">250</span></p> </div> <div data-bind="template: { name: 'person-template', data: seller }"> <h3 data-bind="text: name">Mario</h3> <p>Credits: <span data-bind="text: credits">5800</span></p> </div> テンプレートが展開された vm = { buyer: { name: 'Franklin', credits: 250 }, seller: { name: 'Mario', credits: 5800 } }
34.
Control flow • foreach
binding • if binding • ifnot binding • with binding
35.
foreach binding •
配列分要素を繰り返し追加する <ul data-bind= foreach: users > <li data-bind= text: name ></li> </ul> vm = { users: [{name: hoge }, {name: fuga }] }
36.
foreach binding •
この例の場合 li 要素が2つ分表示される <ul data-bind= foreach: users > <li data-bind= text: name >hoge</li> <li data-bind= text: name >fuga</li> </ul> users配列分繰り返し vm = { users: [{name: hoge }, {name: fuga }] }
37.
foreach bindingと自動更新 •
UIを自動更新する場合はko.observableArrayを使う <ul data-bind= foreach: users > <li data-bind= text: name ></li> </ul> vm = { users: ko.observableArray( [{name: hoge }, {name: fuga }] ) };
38.
foreach bindingと自動更新 •
pushで要素を追加すると li 要素も追加される <ul data-bind= foreach: users > <li data-bind= text: name >hoge</li> <li data-bind= text: name >fuga</li> <li data-bind= text: name >piyo</li> </ul> vm.users.push({name: piyo });
39.
if binding •
オブジェクトがtrueの場合に要素を追加する <div data-bind= if: show > <span>hello world</span> </ul> vm = { show: ko.observable(false); }
40.
ifnot binding •
オブジェクトがtrueの場合に要素を追加しない <div data-bind= ifnot: notShow > <span>hello world</span> </ul> vm = { notShow: ko.observable(false); }
41.
with binding •
バインディングコンテキストを変更する <span data-bind= text: title ></span> <div data-bind= with: data > <ul data-bind= foreach: users > <li data-bind= text: name ></li> </ul> vm = { </div> title: hello data: { users: [{name: hoge }, {name: fuga }] } }
42.
with binding •
vmオブジェクトのコンテキスト <span data-bind= text: title ></span> <div data-bind= with: data > <ul data-bind= foreach: users > <li data-bind= text: name ></li> </ul> vm = { </div> title: hello data: { users: [{name: hoge }, {name: fuga }] } }
43.
with binding •
vm.dataオブジェクトのコンテキスト <span data-bind= text: title ></span> <div data-bind= with: data > <ul data-bind= foreach: users > <li data-bind= text: name ></li> </ul> vm = { </div> title: hello data: { users: [{name: hoge }, {name: fuga }] } }
44.
with binding •
入れ子構造のオブジェクトにアクセスしやすくなる • 大きなViewModelを複数のオブジェクトに分割 <span data-bind= text: title ></span> <div> <ul data-bind= foreach: data.users > <li data-bind= text: name ></li> </ul> </div>
45.
コンテキスト変数 • $parent
• $parentContext • $parents • $context • $root • $element • $data • $index
46.
親のコンテキストにアクセス • $parent
• $parentContext • $parents • $context • $root • $element • $data • $index
47.
foreach中のオブジェクト • $parent
• $parentContext • $parents • $context • $root • $element • $data • $index 配列中のインデックス
48.
現在の要素 • $parent
• $parentContext • $parents • $context • $root • $element <div id= item1 data-bind= text: $element.id ></div> • $data item1 • $index
49.
working with form
fields • click binding • value binfing • event binding • hasfocus • submit binding • checked binding • enable binding • options binding • disable binding • selectedOptions binding • uniqueName binding
50.
click binding •
クリック人のイベントハンドラを設定する <span data-bind= text: message ></span> <button data-bind= click: onclick >click me</button> vm = { message: ko.observable(), onclick: function(data, event){ this.message( hello world! ); } }
51.
click binding • foreach中の要素の場合引数に対応するオブジェクト
が渡される • 基本的にevent.preventDefaultされる • したくない場合は関数からtrueを返す
52.
イベントバブリング •
data-bind中で<イベント名>Bubbleを指定する • クリックイベントのバブリングを止める場合 <button data-bind= click: onclick, clickBubble: false >click me</button>
53.
小ネタ
54.
仮想要素サポート • コメントを使ってバインドを指定できる
• 引数には更新後の値が渡される <ul> <li>first</li> <!-- ko foreach: items --> <li data-bind= text: $data ></li> <!-- /ko --> </ul>
55.
ko.observable.subscribe • ko.observableの値が変更された時に呼び出す関数を 設定できる • 引数には更新後の値が渡される
this.count = ko.observable(1); this.count.subscribe(function(newValue){ alert(newValue); });
56.
スロットル拡張 • ko.observableの値が最後に変更されてから一定時間 経った場合にUIを更新する
vm = { count: ko.observable(1).extend({ throttle: 5000}) } ko.applyBindings(vm); vm.count(2); 5 秒後に 2 に更新される
57.
custom binding • jQueryを使ったDOM操作を隠蔽したり •
使いこなすと結構便利 ko.bindingHandlers.<バインド名> = { init: function(element,valueAccessor){ // applyBinding 時に一度だけ呼ばれる // 主に element に対してイベントハンドラを追加したりする }, update: function(element, valueAccessor){ // バインドしたko.observable()が変更されると呼ばれる // element を更新したりする } };
58.
ko.utils • ko.utils.unwrapObservable • ko.utils.arrayPushAll •
など
59.
サンプルコード • 公式サイトのチュートリアル •
http://learn.knockoutjs.com/ • https://github.com/hakurai/knockout-sample
60.
• http://hakurai.github.com/javap.js/web/
61.
まとめ • knockout便利!
Jetzt herunterladen