Introduction:
In this blog you will see how to get all the Site Content Types using KnockoutJS and CSOM in SharePoint 2013. Please refer my article to implement KnockoutJS in a SharePoint page.
Script:
  1. <script src="https://c986.sharepoint.com/SiteAssets/jquery-1.8.3.min.js"></script>
  2. <script src="https://c986.sharepoint.com/SiteAssets/knockout-3.1.0.js"></script>
  3. <script src="https://c986.sharepoint.com/SiteAssets/ko.sp-1.0.min.js"></script>
  4. <script>
  6. ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");
  7. var completeCTList = null;
  8. var contentTypeCollection=null;
  10. // Class used for saving the property values.
  11. function CTList(name) {
  12. var self = this;
  13. self.Name = name;
  14. }
  16. // View Model - JavaScript that defines the data and behavior of your UI
  17. function CTListViewModel() {
  18. var self = this;
  19. // observableArray equivalent of a regular array,
  20. self.ContentTypes = ko.observableArray([]);
  21. self.AddContentTypes = function (name) {
  22. self.ContentTypes.push(new CTList(name));
  23. }
  24. }
  26. function MainFunction() {
  27. completeCTList = new CTListViewModel();
  29. // Retrieve the SharePoint Site Content Types
  30. retrieveContentTypes();
  32. // Activates knockout.js
  33. ko.applyBindings(completeCTList);
  34. }
  36. function retrieveContentTypes() {
  37. var clientContext = new SP.ClientContext.get_current();
  38. var list = clientContext.get_web().get_lists().getByTitle("Employee Details");
  39. this.contentTypeCollection = list.get_contentTypes();
  40. clientContext.load(contentTypeCollection);
  41. clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
  42. }
  44. function onQuerySucceeded(sender, args) {
  45. var contentTypeEnumerator = contentTypeCollection.getEnumerator();
  46. while (contentTypeEnumerator.moveNext()) {
  47. var content = contentTypeEnumerator.get_current();
  48. completeCTList.AddContentTypes(content.get_name());
  49. }
  50. }
  52. function onQueryFailed(sender, args) {
  53. alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  54. }
  55. </script>
  56. <!-- view - HTML markup that defines the appearance of your UI -->
  57. <div id="divCTList">
  58. <h2>
  59. List Content Types</h2>
  60. <br />
  61. <table id="tblEmployeeList" border="1">
  62. <thead>
  63. <tr>
  64. <th>
  65. Name
  66. </th>
  67. </tr>
  68. </thead>
  69. <!-- Iterating through every list item using foreach of KO -->
  70. <tbody data-bind="foreach: ContentTypes">
  71. <tr>
  72. <td data-bind="text: Name">
  73. </td>
  74. </tr>
  75. </tbody>
  76. </table>
  77. </div>
Output:
Summary:
Thus in this blog you saw how to get all the list Content Types using KnockoutJS and CSOM in SharePoint 2013.