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
76
deploying_angular.pdf
johnpapa
0
68
Readable Code
johnpapa
7
2.4k
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
760
Single Page Applications with Microsoft ASP.NET
johnpapa
1
400
Single Page Apps
johnpapa
3
14k
Other Decks in Technology
See All in Technology
MLOps の現場から
asei
6
630
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
250
Wantedly での Datadog 活用事例
bgpat
1
430
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
330
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
kargoの魅力について伝える
magisystem0408
0
200
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
A Modern Web Designer's Workflow
chriscoyier
693
190k
We Have a Design System, Now What?
morganepeng
51
7.3k
Thoughts on Productivity
jonyablonski
67
4.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Making Projects Easy
brettharned
116
5.9k
The Invisible Side of Design
smashingmag
298
50k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
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