Client side mvvm pattern

2,271 views

Published on

Client side MMVM pattern in SharePoint presentation for the Capital Area .Net SharePoint Special interest group

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
2,271
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Client side mvvm pattern

  1. 1. • • • • • • • WWW.REPOINTTECHNOLOGIES.COM • • • • • • • • • •
  2. 2. • • • • • • • • • • Often times is the most volatile area of many applications and is the least tested in terms of unit testing. Server-side programming allows some testing of UI. But… the industry is moving towards client-side programming to get faster, better, more interactive sites (facebook, twitter, etc…)
  3. 3. • • • • • • • •
  4. 4. • • • • • • • • • • • •
  5. 5. • • • • • • • • • •
  6. 6. • • •
  7. 7. • • •
  8. 8. • HTTP://KNOCKOUT.JS.COM • • • • • • •
  9. 9. • HTTP://QUNIT.JS.COM •
  10. 10. • • HTTP://KNOCKOUTJS.COM/DOCUMENTATION/PLUGINS-MAPPING.HTML • HTTPS://GITHUB.COM/KNOCKOUT-CONTRIB/KNOCKOUT-VALIDATION • •
  11. 11. 1. 2.  3.
  12. 12. MAIN FUNCTION PERSONALINFORMATION = FUNCTION () { THIS.LOAD = FUNCTION() { $.AJAX({ TYPE: "POST", CACHE: FALSE, CONTENTTYPE: "APPLICATION/JSON; CHARSET=UTF-8", URL: "/_VTI_BIN/EODSSERVICES/REST/DATA.SVC/GETPAGEDATA", DATA: JSON.STRINGIFY(PAGEDATA), DATATYPE: "JSON", SUCCESS: FUNCTION (DATA) { // ACTIVATES KNOCKOUT.JS ON OUR VIEWMODEL THIS.VIEWMODEL = NEW PERSONALINFORMATIONVIEWMODEL(DATA); KO.APPLYBINDINGS(THIS.VIEWMODEL); }, ERROR: FUNCTION (XHR, STATUS, ERROR) { //LOG } }); } } VIEW MODEL PERSONALINFORMATIONVIEWMODEL = FUNCTION (DATA) { VAR SELF = THIS; KO.VALIDATEDOBSERVABLE(KO.MAPPING.FROMJS(DATA, PERSONALINFOVALIDATIONMAPPING, SELF)); SELF.SAVE = FUNCTION () { VAR PERSONALINFO = KO.MAPPING.TOJS(SELF); $.AJAX({ TYPE: "POST", CACHE: FALSE, CONTENTTYPE: "APPLICATION/JSON; CHARSET=UTF-8", URL: "/_VTI_BIN/EODSSERVICES/REST/PERSON.SVC/SAVEPREHIRE", DATA: JSON.STRINGIFY({ "PERSONINFORMATION": PERSONALINFO }), DATATYPE: "JSON", SUCCESS: FUNCTION (DATA) { //MESSAGE }, ERROR: FUNCTION (XHR, STATUS, ERROR) { //LOG } }); }; SELF.CLOSE = FUNCTION () { RETURN EODS.UTILS.BUILDCANCELBOX(); }; }; Note: ko.validateObservable is from validation plugin. Ko.Mapping is from mapping plugin. If you don’t have the mapping plugin you can write your observable properties one by one by looping through the data and writing ko.observable properties Validation Mapping: Will discuss in a few slides KO.MAPPING.FROMJS IS THE SAME AS SELF.FIRSTNAME = KO.OBSERVABLE(“GREG”); SELF.LASTNAME = KO.OBSERVABLE(“GALIPEAU”); ETC… THE KO.MAPPING BASICALLY TAKES THE JSON STRUCTURE RETURNED FROM THE WEB SERVICE AND DYNAMICALLY LOOPS THROUGH THE DATA AND BUILDS EACH OBSERVABLE FOR YOU. IT’S GREAT WHEN YOU HAVE LARGE DATASETS.
  13. 13. 5. PROTECTED VOID PAGE_LOAD(OBJECT SENDER, EVENTARGS E) { SPSITE SITE = SPCONTEXT.CURRENT.SITE; LITERALCONTROL JSRESOURCE = NEW LITERALCONTROL(); JSRESOURCE.TEXT += "<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="" + SITE.URL + "/STYLE LIBRARY/VIEWMODELS/PERSONALINFORMATION.JS"></SCRIPT>"; JSRESOURCE.TEXT += "<SCRIPT TYPE="TEXT/JAVASCRIPT">$(FUNCTION () { VAR PERSONALINFORMATION = NEW EODS.PERSONALINFORMATION(); PERSONALINFORMATION.LOAD(); }); </SCRIPT>"; PAGE.HEADER.CONTROLS.ADD(JSRESOURCE); }
  14. 14. 6. • • • • • 7. • • • •
  15. 15. 8. VAR PERSONALINFOVALIDATIONMAPPING = { PERSON_FIRST_NAME: { CREATE: FUNCTION (OPTIONS) { RETURN KO.OBSERVABLE(OPTIONS.DATA).EXTEND({REQUIRED: TRUE}); } }, PERSON_LAST_NAME: { CREATE: FUNCTION (OPTIONS) { RETURN KO.OBSERVABLE(OPTIONS.DATA).EXTEND({REQUIRED: TRUE}); } } }  HTTP://KNOCKOUTJS.COM/DOCUMENTATION/PLUGINS-MAPPING.HTML  HTTPS://GITHUB.COM/KNOCKOUT-CONTRIB/KNOCKOUT-VALIDATION
  16. 16. • • • • • • • • • •

×