This document provides an overview of a presentation on using Knockout.js in SharePoint. The presentation covers TypeScript, Model-View-ViewModel (MVVM) frameworks, why Knockout was chosen, how Knockout works with models, view models, views and extensions, and lessons learned. It also includes an agenda with topics on Knockout concepts like observables, markup, extensibility and components.

1. Knockout in SharePoint
A (Mostly) Real-World Example of Components and Datatables
Sam Larko

2. © 2015 Applied Information Sciences, Inc.
Who is this guy?
 Software Engineer at Applied Information Sciences
 Contributing Author: Microsoft SharePoint 2013
Inside Out
 Co-organizer of SA SPUG & NUG
 Year 11 of 15-Life with SharePoint
 @SPSamL
 blog.samlarko.com
 blog.Appliedis.com
 Github.com/SPSamL

3. © 2015 Applied Information Sciences, Inc.
Agenda
 Is TypeScript really useful?
 What are MV* Frameworks?
 Why Knockout, not Angular/Durandal/Aurelia?
 Code Walkthrough
> How it works
> Models
> ViewModels
> Views
> Extras (extensions, etc)
 Gotchas/Lessons learned/Facepalm moments

4. © 2015 Applied Information Sciences, Inc.
TypeScript
 Superset of JavaScript
 Strongly-typed variables
 Visual Studio Intellisense
 OOP
 Still just JavaScript
 ES Feature Implementations:
> Most ES5
> Many ES6
> Some ES7

5. © 2015 Applied Information Sciences, Inc.
MV* Frameworks
 MVC
> Controller determines Model
> Model passed to View
> View translates Model for presentation
> ASP.NET MVC, Angular, Aurelia
 MVVM
> Model and View are same as MVC
> VM provide data-binding between
Model and View, handles UI
actions
> Does not need to reference View
> Silverlight, Knockout, UWP apps

6. © 2015 Applied Information Sciences, Inc.
Momma said Knock[you]out
 JS Library
 Features
> 2-way Data-binding
> HTML Templating
 Angular/etc are frameworks with full app features
> Routing, dependency injection, scopes, services
 Knockout in SharePoint
> Already have navigation/routing
> SharePoint JSOM or REST for services

7. © 2015 Applied Information Sciences, Inc.
Knockout Observables
Observable
Observable Array
Computed Observable
KO Utilities

8. © 2015 Applied Information Sciences, Inc.
Knockout Markup
Events
Data
Containerless binding
Attributes

9. © 2015 Applied Information Sciences, Inc.
Knockout Extensibility

10. © 2015 Applied Information Sciences, Inc.
Knockout Components

11. © 2015 Applied Information Sciences, Inc.

12. © 2015 Applied Information Sciences, Inc.
Lessons Learned/Gotchas

13. © 2015 Applied Information Sciences, Inc.
Questions

14. © 2015 Applied Information Sciences, Inc.
Resources
 Scot Hillier post on Promises & JSOM -
http://www.shillier.com/archive/2013/03/04/using-promises-with-the-
javascript-client-object-model-in-sharepoint-2013.aspx
 TypeScript - http://www.typescriptlang.com
 KnockoutJS - http://learn.knockoutjs.com/
 DefinitelyTyped TS Definitions - http://definitelytyped.org/
 Simple KO Grid example - http://jsfiddle.net/brettwgreen/zfxmac7z/
 Rob Niemeyer - http://www.knockmeout.net/

15. Welcome to SharePoint Saturday Houston
 Please turn off all electronic devices or set them to vibrate.
 If you must take a phone call, please do so in the hall so as not
to disturb others.
 Special thanks to our Platinum Sponsors:
Thank you for being a part of the
8th Annual SharePoint Saturday
for the greater Houston area!

16. Thanks to all our Sponsors!Thanks to all our Sponsors!

17. Information
 Speaker presentation slides should be available from the
SPSHOU website within a week or so
 The Houston SharePoint User Group will be having it’s
next meeting Wednesday May 18th. Please join us at
www.h-spug.org

18. © 2015 Applied Information Sciences, Inc.