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

2. •
•
•
•
•
•
• WWW.REPOINTTECHNOLOGIES.COM
•
•
•
•
•
•
•
•
•
•

3. •
•
•
•
•
•
•
•
•
•
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…)

4. •
•
•
•
•
•
•
•

5. •
•
•
•
•
•
•
•
•
•
•
•

6. •
•
•
•
•
•
•
•
•
•

7. •
•
•

9. •
•
•

10. • HTTP://KNOCKOUT.JS.COM
•
•
•
•
•
•
•

12. • HTTP://QUNIT.JS.COM
•

13. •
•
HTTP://KNOCKOUTJS.COM/DOCUMENTATION/PLUGINS-MAPPING.HTML
•
HTTPS://GITHUB.COM/KNOCKOUT-CONTRIB/KNOCKOUT-VALIDATION
•
•

15. 1.
2.

3.

16. 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.

17. 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);
}

18. 6.
•
•
•
•
•
7.
•
•
•
•

19. 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

20. •
•
•
•
•
•
•
•
•
•