1
Answer

SPO Announcements knockoutjs sort observable array.

yogesh t

yogesh t

7y
255
1
I am trying to show new announcements on top & drop off expired announcements from UI using knockoutjs. Being a newbie to knockout, i'm stuck here and unable to move further. here's a piece of code which needs some correction. Appreciate any pointers to resolve this issue. and on the UI, I am using data bind="foreach: items, as: 'item'" to ul element.
  1. function ItemViewModel(params)  
  2. {  
  3. this.text = ko.observable(params.title);  
  4. //this.id = ko.observable(params.id);  
  5. this.link = ko.observable(params.path);  
  6. this.cssClass = ko.observable("");  
  7. }  
  8. function viewModel(params)  
  9. {  
  10. var self = this;  
  11. this.isLoading = ko.observable(true).extend({ throttle: 250 });  
  12. this.studio = ko.observable(params.studio || "");  
  13. this.maxItems = ko.observable(params.maxItems || 8);  
  14. this.items = ko.observableArray([]);  
  15. this.dialogId = ko.observable('AnnouncementsModal');  
  16. this.addItem = function (item, e)  
  17. {  
  18. navigationService.navigateTo('/Announcements/NewForm.aspx'true);  
  19. e.preventDefault(); };  
  20. this.canAddItem = ko.computed(function()  
  21. {  
  22. var isLeader = contextService.isLeader();  
  23. var isContributor = contextService.isContributor();  
  24. return isLeader || isContributor; }, this);  
  25. this.hasNoItems = ko.computed(function()  
  26. {  
  27. var items = self.items();  
  28. return items.length === 0;  
  29. }, this).extend({ throttle: 250 });  
  30. this.searchTerm = ko.computed(function ()  
  31. {  
  32. var studio = contextService.studio();  
  33. if (studio)  
  34. {  
  35. return studio;  
  36. }  
  37. return self.studio();  
  38. });  
  39. ko.computed(function ()  
  40. {  
  41. var maxItems = self.maxItems();  
  42. var term = self.searchTerm();  
  43. if (term == null || term === "")  
  44. return null;  
  45. self.isLoading(true);  
  46. console.log('announcements-webpart/vm.js: data-service load...');  
  47. dataService.studios.announcements(term, maxItems) .done(function (result)  
  48. {  
  49. console.log('announcements-webpart/vm.js: data-service load completed.');  
  50. self.isLoading(false);  
  51. self.items.removeAll();  
  52. if (result.items)  
  53. {  
  54. for (var i = 0; i < result.items.length; i++)  
  55. {  
  56. if (i >= maxItems) return;  
  57. var item = new ItemViewModel(result.items[i]);  
  58. self.items.push(item);  
  59. }  
  60. }  
  61. }); return null;  
  62. }, this).extend({ deferred: true });  
  63. }  
  64. viewModel.prototype.dispose = function () { };  
  65. return viewModel; })();  
Answers (1)