MVVM magic inSharePoint 2010using KnockoutJS!Ajay NayakCap Area SharePoint SIG08/14/2012
About Me• SharePoint “jack of all trades”• Booz Allen Hamilton• 5 years working exclusively with SharePoint  2003/2007/201...
Client-side Development• Coding on the client (HTML, JavaScript, CSS) vs.  the server (.NET, Java)• Modern browsers combin...
What about SharePoint?• Client-side tools at our disposal  • SP2010 client-side object model  • SPServices library  • REST...
The Dilemma…• How do we manage the interaction between  HTML, JavaScript, CSS, and web services?• jQuery provides us a pow...
Model-View-Viewmodel• Architectural pattern created by Microsoft for WPF  development• Separates UI from the Data layer an...
Common MVVM Scenario• The Model is defined server-side and is sent to the client in  the form of a JSON (JavaScript Object...
KnockoutJS• Open-source JavaScript MVVM library created by Steve  Sanderson• Simplifies the MVVM data-binding process  • U...
Example• View  • <p>First name: <input data-bind="value: firstName" /></p>  • <p>Last name: <input data-bind="value: lastN...
Demo
Advanced Techniques• Mapping Data   • ko.mapping.fromJS(data, viewModel);• Looping   • <ul data-bind="foreach: months">   ...
Links• Knockoutjs Demo Video  • http://channel9.msdn.com/Events/MIX/MIX11/FRM08• Knockoutjs Tutorial & Documentation  • ht...
Thanks!
Upcoming SlideShare
Loading in …5
×

MVVM Magic in SharePoint 2010 using Knockoutjs!

5,447 views
5,088 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,447
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MVVM Magic in SharePoint 2010 using Knockoutjs!

  1. 1. MVVM magic inSharePoint 2010using KnockoutJS!Ajay NayakCap Area SharePoint SIG08/14/2012
  2. 2. About Me• SharePoint “jack of all trades”• Booz Allen Hamilton• 5 years working exclusively with SharePoint 2003/2007/2010• Things that excite me: • Well-constructed SharePoint solutions • HTML5 • Mountain biking • Craft beer• @ajaynayak• ajaynayak {at} gmail {dot} com
  3. 3. Client-side Development• Coding on the client (HTML, JavaScript, CSS) vs. the server (.NET, Java)• Modern browsers combined with new standards (HTML5) and powerful frameworks (jQuery)• Users have come to expect asynchronous operations and rich UI interaction
  4. 4. What about SharePoint?• Client-side tools at our disposal • SP2010 client-side object model • SPServices library • REST web services to interact with• Reasons for developing client-side applications • Easy to deploy • Simple as pushing element files into document libraries • “Cloud ready” • The SP2013 “Cloud App Model” encourages JS on the client and RESTful services in the cloud
  5. 5. The Dilemma…• How do we manage the interaction between HTML, JavaScript, CSS, and web services?• jQuery provides us a powerful framework, but how do we structure our app in a way that preserves functionality, but reduces “code bloat”?
  6. 6. Model-View-Viewmodel• Architectural pattern created by Microsoft for WPF development• Separates UI from the Data layer and Business Logic• Model • Defines the objects• View • Defines the user interface• Viewmodel • Defines how the user interface (View) is integrated with the data (Model)
  7. 7. Common MVVM Scenario• The Model is defined server-side and is sent to the client in the form of a JSON (JavaScript Object Notation) string • Ex. person: { age: 23, name: ‘john doe’ }• The View is defined via HTML and ASP.NET code • <div id=“personRecord”> • <div id=“age”>Age: <input id=“ageValue” ></input></div> • <div id=“name”>Name: <input id=“nameValue” </input></div> • </div>• In this scenario, the Viewmodel would bind the JSON “person” object to the input fields contained in the “personRecord” div element • The Viewmodel would also handle getting fresh data or sending updates to the server
  8. 8. KnockoutJS• Open-source JavaScript MVVM library created by Steve Sanderson• Simplifies the MVVM data-binding process • Uses “observables” to dynamically change Viewmodel properties upon changes to the view • Eliminates the need for event handlers in the UI • Handles retrieving and updating data from web services• Extremely easy to learn • Knockoutjs.com contains a live tutorial and ample documentation • Very few commands to learn, yet very powerful and extendable
  9. 9. Example• View • <p>First name: <input data-bind="value: firstName" /></p> • <p>Last name: <input data-bind="value: lastName" /></p> • <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>• ViewModel • function ViewModel() { • this.firstName = ko.observable("Planet"); • this.lastName = ko.observable("Earth"); • this.fullName = ko.computed(function() { • return this.firstName() + " " + this.lastName(); • }, this); • } • ko.applyBindings(new ViewModel());• Explanation • The “data-bind” attribute binds an HTML element to a variable in the Viewmodel • ko.observable() tells Knockout to “observe” this variable in the View, and update the variable with any changes • ko.applyBindings() ties all declared bindings in the Viewmodel to “data- bind” attributes in the View
  10. 10. Demo
  11. 11. Advanced Techniques• Mapping Data • ko.mapping.fromJS(data, viewModel);• Looping • <ul data-bind="foreach: months"> • <li> • The current item is: <b data-bind="text: $data"></b> • </li> • </ul>• Containerless Control Flow • <!-- ko if: someExpressionGoesHere --> • <li>I want to make this item present/absent dynamically</li> • <!-- /ko -->• Templating • <div data-bind="template: { name: person-template, data: seller }"></div> • <script type="text/html" id="person-template"> • <h3 data-bind="text: name"></h3> • <p>Credits: <span data-bind="text: credits"></span></p> • </script>
  12. 12. Links• Knockoutjs Demo Video • http://channel9.msdn.com/Events/MIX/MIX11/FRM08• Knockoutjs Tutorial & Documentation • http://knockoutjs.com/• MVVM • http://addyosmani.com/blog/understanding-mvvm-a-guide-for- javascript-developers/• SharePoint 2010 REST Documentation • http://msdn.microsoft.com/en-us/library/ff521587.aspx• Using the SP2010 REST Interface with JavaScript • http://msdn.microsoft.com/en-us/library/ff798303.aspx
  13. 13. Thanks!

×