I am looking at the results of a spa 8 template, and see the following:
<a data-bind="click: save" href="#" class="dnnPrimaryAction">[Resx:{key:"btnSubmit"}]</a>
<a data-bind="click: cancel" href="#" class="dnnSecondaryAction">[Resx:{key:"btnCancel"}]</a>
The above are a button and a link for an edit view of a task module. No where is there any reference in the js or html or css to HOW the dnnPrimaryAction is somehow translated to a webservice action. I mean, here is the webservice call that obviously must be made by the first line of html above. It's a piece of the javascript 'taskitem' object:
var save = function () {
isLoading(true);
var item = {
id: id(),
name: name(),
description: description(),
assignedUser: assignedUser()
};
var ajaxMethod = "POST";
var restUrl = service.baseUrl;
if (item.id > 0) {
// ajaxMethod = "PATCH";
restUrl += item.id;
}
var jqXHR = $.ajax({
method: ajaxMethod,
url: restUrl,
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(item),
beforeSend: service.framework.setModuleHeaders,
dataType: "json"
}).done(function (data) {
console.log(data);
dnnModal.closePopUp();
}).always(function (data) {
isLoading(false);
});
};
So, exactly HOW does the html lead to this section of code? There is no relationship I can see between the class OR id of the html.
Here's the complete javascript object. This is a dnn released object, so I am sure LOTS of people will have the same questions I do. I am familiar with knockout.js and jquery, and have done development with both of them for years, but I cannot see how this works, and obviously cannot build anything using spa unless the meaning is clear.
var LicenseManager = LicenseManager || {};
LicenseManager.itemViewModel = function (moduleId, resx) {
var service = {
path: "LicenseManager",
framework: $.ServicesFramework(moduleId)
}
service.baseUrl = service.framework.getServiceRoot(service.path) + "Item/";
var id = ko.observable(-1);
var name = ko.observable('');
var description = ko.observable('');
var assignedUser = ko.observable(-1);
var userList = ko.observableArray([]);
var isLoading = ko.observable(false);
var init = function () {
var qs = getQueryStrings();
var itemId = qs["tid"];
if (itemId) {
getItem(itemId);
}
getUserList();
};
var getQueryStrings = function () {
var assoc = {};
var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
var queryString = location.search.substring(1);
var keyValues = queryString.split('&');
for (var i = 0; i < keyValues.length; i++) {
var key = keyValues[i].split('=');
if (key.length > 1) {
assoc[decode(key[0])] = decode(key[1]);
}
}
return addRewriteQueryString(assoc, decode);
};
var addRewriteQueryString = function (hash, decode) {
var path = location.pathname;
var queryString = path.substring(path.search('/ctl/') + 1);
var keyValues = queryString.split('/');
for (var i = 0; i < keyValues.length; i += 2) {
hash[decode(keyValues[i])] = decode(keyValues[i + 1])
}
return hash;
};
var getItem = function (itemId) {
isLoading(true);
var restUrl = service.baseUrl + itemId;
var jqXHR = $.ajax({
url: restUrl,
beforeSend: service.framework.setModuleHeaders,
dataType: "json"
}).done(function (data) {
if (data) {
load(data);
}
else {
clear();
}
}).always(function (data) {
isLoading(false);
});
};
var getUserList = function () {
isLoading(true);
// need to calculate a different Url for User service
var restUrl = service.framework.getServiceRoot(service.path) + "User/";
var jqXHR = $.ajax({
url: restUrl,
beforeSend: service.framework.setModuleHeaders,
dataType: "json",
async: false
}).done(function (data) {
if (data) {
loadUsers(data);
}
else {
clear();
}
}).always(function (data) {
isLoading(false);
});
};
var load = function (data) {
id(data.id)
name(data.name);
assignedUser(data.assignedUser);
description(data.description);
};
var save = function () {
isLoading(true);
var item = {
id: id(),
name: name(),
description: description(),
assignedUser: assignedUser()
};
var ajaxMethod = "POST";
var restUrl = service.baseUrl;
if (item.id > 0) {
// ajaxMethod = "PATCH";
restUrl += item.id;
}
var jqXHR = $.ajax({
method: ajaxMethod,
url: restUrl,
contentType: "application/json; charset=UTF-8",
data: JSON.stringify(item),
beforeSend: service.framework.setModuleHeaders,
dataType: "json"
}).done(function (data) {
console.log(data);
dnnModal.closePopUp();
}).always(function (data) {
isLoading(false);
});
};
var loadUsers = function (data) {
userList.removeAll();
var underlyingArray = userList();
for (var i = 0; i < data.length; i++) {
var result = data[i];
var user = new LicenseManager.user(result.id, result.name);
underlyingArray.push(user);
}
userList.valueHasMutated();
};
var clear = function () {
id('');
name('');
description('');
assignedUser(-1);
};
var cancel = function () {
dnnModal.closePopUp(false);
};
return {
id: id,
name: name,
description: description,
assignedUser: assignedUser,
userList: userList,
cancel: cancel,
load: load,
save: save,
init: init,
isLoading: isLoading
};
}
LicenseManager.user = function (id, name) {
this.id = id;
this.name = name;
}