Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KnockoutJS TechEd NA 2012
Search
John Papa
July 01, 2012
Technology
3
4.2k
KnockoutJS TechEd NA 2012
John Papa
July 01, 2012
Tweet
Share
More Decks by John Papa
See All by John Papa
Choosing Your JavaScript Framework
johnpapa
1
89
deploying_angular.pdf
johnpapa
0
77
Readable Code
johnpapa
7
2.5k
Building Rich Apps with AngularJS on ASP.NET
johnpapa
6
18k
Gulp and Grunt
johnpapa
20
12k
Angular and WIP: Progressive Saving
johnpapa
3
12k
KnockoutJS and MVVM with JavaScript - TechED 2013
johnpapa
1
790
Single Page Applications with Microsoft ASP.NET
johnpapa
1
430
Single Page Apps
johnpapa
3
14k
Other Decks in Technology
See All in Technology
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
120
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
210
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
140
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
rubygem開発で鍛える設計力
joker1007
2
220
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
310
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
A2Aのクライアントを自作する
rynsuke
1
220
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.9k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
110
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Unsuck your backbone
ammeep
671
58k
Why Our Code Smells
bkeepers
PRO
337
57k
How GitHub (no longer) Works
holman
314
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Typedesign – Prime Four
hannesfritz
42
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
None
With and Without Knockout
UI Patterns Data & Bindings Separation of Concerns Structured JavaScript
6+ 2+ Separates behavior and structure Declarative bindings Observables
data-bind="value: firstName" Declarative Binding ko.observable ko.applyBindings Create an Observable Bind
the ViewModel to the View http://jsfiddle.net/johnpapa/BEzJc/
Source object Push from Source to Target
None
With and Without Knockout Observable
Taylor 110 Taylor 914ce Taylor 914ce Taylor 110
data-bind Declarative Binding product: { id: 1001, model: ko.observable("Taylor 314ce"),
salePrice: ko.observable(1199.95) } ko.applyBindings(data); Source object Bind Source to Target, & Vice Versa
None
With and Without Knockout Observable Computed
computed dependentObservable
ko.computed this this.qty vm observables owner
None
With and Without Knockout Observable Computed ObservableArray
None
var myViewModel = { salesPerson: ko.observable("John"), empNum: ko.observable(39811), products: ko.observableArray([
{ model: "Taylor 314CE", price: 1749, id=321 }, { model: "Martin D40", price: 1899, id=479 } ]) }; <span data-bind="text: products().length"></span> Pre-populating Operating on observableArray
None
With and Without Knockout Observable Computed ObservableArray Built In Bindings
enable value options value optionsText optionsValue Built into Knockout Binding
for element attributes Multiple binding expressions
attr checked click css disable enable event hasfocus html options
optionsText optionsValue selectedOptions style submit text uniqueName value visible text value click disable enable attr Display and state bindings Text and value bindings Bindings for specific attributes visible event Event bindings
None
With and Without Knockout Observable Computed ObservableArray Built In Bindings
Templates
• If truthy condition if • If falsy condition ifnot
• Execute for each item in a list foreach • Shortcut to execute for the object with
template: {name: 'productsTmpl', foreach: lines} Pass the context for the
template with “foreach” productsTmpl
if: lines().length > 0 Any “truthy” expression
with: model text: brand text: name <div> <div data-bind="text: model().brand"></div>
<div data-bind="text: model().name"></div> </div>
None
All Part of the Native Template Engine in Knockout
None
With and Without Knockout Observable Computed ObservableArray Built In Bindings
Templates Custom Binding Handlers
None
function(element, valueAccessor function(element, valueAccessor Runs first time the binding is
evaluated Runs after init and every time one of its observables changes
element, valueAccessor, allBindingsAccessor, viewModel valueAccessor element element, valueAccessor, allBindingsAccessor, viewModel
valueAccessor element element Bound DOM element What is passed to the binding All other bindings on same element The viewmodel
None
With and Without Knockout Observable Computed ObservableArray Built In Bindings
Templates
JavaScript: The Developer Experience (DEV308) JavaScript: The Language (DEV307)
http://www.microsoft.com/visualstudio/en-us http://blogs.msdn.com/b/jasonz/ http://www.facebook.com/visualstudio http://twitter.com/#!/visualstudio Somasegar’s Blog http://blogs.msdn.com/b/somasegar/
http://northamerica.msteched.com www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn
None
None
None
None