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
75
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
750
Single Page Applications with Microsoft ASP.NET
johnpapa
1
400
Single Page Apps
johnpapa
3
14k
Other Decks in Technology
See All in Technology
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
使えそうで使われないCloudHSM
maikamibayashi
0
170
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
APIテスト自動化の勘所
yokawasa
7
4.1k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
320
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
Autify Company Deck
autifyhq
1
39k
Featured
See All Featured
Designing for humans not robots
tammielis
249
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Practical Orchestrator
shlominoach
186
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Embracing the Ebb and Flow
colly
84
4.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
A better future with KSS
kneath
238
17k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
GraphQLとの向き合い方2022年版
quramy
43
13k
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