Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Server

Microsoft Sharepoint 2013 : Understanding app patterns (part 1) - Building MVVM apps - Understanding JavaScript challenges

- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
1/25/2015 2:56:15 AM

This section details app patterns that can be used with these development scenarios. Specifically, the Model-View-ViewModel (MVVM) pattern is presented for JavaScript with REST and the Model-View-Controller (MVC) pattern is presented for C# with CSOM.

Building MVVM apps

The MVVM pattern provides a flexible way to build JavaScript/REST apps that promotes code reuse, simplifies app maintenance, and supports testing. The pattern consists of three different components. The Model component is defined as the entities on the SharePoint server such as lists, libraries, and service applications. The View component is defined as the webpages that make up the app user interface. The ViewModel component is defined as the JavaScript that binds the Model and the View together. Figure 1 shows a simple block diagram of the MVVM pattern.

You use the MVVM pattern to isolate data, business logic, and display functionality.
Figure 4-1. You use the MVVM pattern to isolate data, business logic, and display functionality.

The goal of the MVVM pattern is to separate the display of data from the business logic, which is in turn separated from the underlying data. In practical terms, this means that all JavaScript is removed from the app webpages and segregated into libraries. These libraries are responsible for interacting with the back-end data, applying business logic, and feeding data to the webpages for display.

Understanding JavaScript challenges

The biggest challenge in implementing apps with JavaScript is the intimate relationship between the webpages and the libraries. In many JavaScript implementations, the code in the libraries must have detailed knowledge of the markup in the webpages.

Example 1. Generating HTML in JavaScript
readAll = function () {
$.ajax(
{
url: _spPageContextInfo.webServerRelativeUrl +
"/_api/web/lists/getByTitle('Contacts')/items/" +
"?$select=Id,FirstName,Title,WorkPhone" +
"&$orderby=Title,FirstName",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
readAllSuccess(data);
},
error: function (err) {
alert(JSON.stringify(err));
}
}
);
},

readAllSuccess = function (data) {
var html = [];
html.push("<table><thead><tr><th>ID</th><th>First Name</th>" +
"<th>Last Name</th><th>Title</th></tr></thead>");

var results = data.d.results;

for(var i=0; i<results.length; i++) {
html.push("<tr><td>");
html.push(results[i].ID);
html.push("</td><td>");
html.push(results[i].FirstName);
html.push("</td><td>");
html.push(results[i].Title);
html.push("</td><td>");
html.push(results[i].WorkPhone);
html.push("</td></tr>");
}

html.push("</table>");
$('#displayDiv').html(html.join(''));
}
Example 1 uses the jQuery ajax method to select items from a contacts list. If the call is successful, an HTML table is constructed and assigned to the inner HTML of a <div> element. Note how the JavaScript must understand that the webpage requires a table for display. Because of this design, the library cannot be reused to display the data in a different way. If you wanted to show the items in a list, for example, you would need to rewrite the success handler to generate a list instead of a table. This is the challenge that the MVVM pattern seeks to address.
Other -----------------
- Microsoft Sharepoint 2013 : Working with documents - Checking documents in and out
- Microsoft Sharepoint 2013 : Working with documents - Requiring and displaying document check out
- Microsoft Sharepoint 2013 : Working with documents - Uploading multiple documents
- Microsoft Sharepoint 2013 : Working with documents - Customizing document templates
- Microsoft Sharepoint 2013 : Working with documents - Managing documents with a document library
- Microsoft LynServer 2013 : Windows Client - Conferencing (part 3) - Scheduling a Meeting
- Microsoft LynServer 2013 : Windows Client - Conferencing (part 2) - Changing the Layout, Customizing Meeting Options
- Microsoft LynServer 2013 : Windows Client - Conferencing (part 1) - Using the Meet Now Function, Controlling a Meeting, Managing Meeting Content
- Microsoft LynServer 2013 : Windows Client - Peer-to-Peer Conversations (part 2) - Making Audio Calls, Making Video Calls
- Microsoft LynServer 2013 : Windows Client - Peer-to-Peer Conversations (part 1) - Using Tabbed Conversations
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server