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
91
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
800
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エージェント」を実現するチームと開発プロセス
tkikuchi1002
3
350
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
AI エージェントと考え直すデータ基盤
na0
20
7.9k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
microCMSではじめるAIライティング
himaratsu
0
150
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
三視点LLMによる複数観点レビュー
mhlyc
0
230
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
110
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
81
5.4k
Side Projects
sachag
455
42k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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