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.3k
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
96
deploying_angular.pdf
johnpapa
0
78
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
810
Single Page Applications with Microsoft ASP.NET
johnpapa
1
440
Single Page Apps
johnpapa
3
14k
Other Decks in Technology
See All in Technology
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
Developer Advocate / Community Managerなるには?
tsho
0
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.2k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
130
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
80k
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
170
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
690
A Beginner’s Guide to the Extreme Programming MA-TSU-RI
amapyon
0
100
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
260
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
250
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
GitHub's CSS Performance
jonrohan
1032
470k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
How to Ace a Technical Interview
jacobian
280
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Embracing the Ebb and Flow
colly
88
4.8k
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