Your SlideShare is downloading. ×
0
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
MVVM Magic in SharePoint 2010 using Knockoutjs!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MVVM Magic in SharePoint 2010 using Knockoutjs!

4,730

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
4,730
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MVVM magic inSharePoint 2010using KnockoutJS!Ajay NayakCap Area SharePoint SIG08/14/2012
  • 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. 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. 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. 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. 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. 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. 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. 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. Demo
  • 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. 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. Thanks!

×