• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building HTML and JavaScript Apps with KnockoutJS and MVVM
 

Building HTML and JavaScript Apps with KnockoutJS and MVVM

on

  • 506 views

 

Statistics

Views

Total Views
506
Views on SlideShare
505
Embed Views
1

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building HTML and JavaScript Apps with KnockoutJS and MVVM Building HTML and JavaScript Apps with KnockoutJS and MVVM Presentation Transcript

    • 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 http://jsfiddle.net/johnpapa/BEzJc/
    • Source object Push from Source to Target
    • With and Without Knockout Observable
    • Taylor 110 Taylor 914ceTaylor 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
    • With and Without Knockout Observable Computed
    • computed dependentObservable
    • observables
    • With and Without Knockout Observable Computed ObservableArray
    • 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
    • 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 visibletext value click disable enable attr Display and state bindings Text and value bindingsBindings for specific attributes visible event Event bindings
    • With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates
    • • If truthy conditionif • If falsy conditionifnot • Execute for each item in a listforeach • Shortcut to execute for the objectwith
    • 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>
    • All Part of the Native Template Engine in Knockout
    • With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates Custom Binding Handlers
    • 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
    • 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