I am trying to get a listview filled with messages that reside in an array in the ViewModel. When i click on a category the function updateMessages is called. (shown below)
updateMessages fills in the messagesViewModel:
Which then gets shown in the view like this:
The problem is that everytime I click on a category the array just keeps on filling up. I want to empty the array before adding new messages. I tried to add a clearMessage function in the viewmodel that executed: this.messages.length = 0. This cleared the array but in the view model you can still see all the old messages. How can I remove those messages everytime this view is called upon.
01.function updateMessages(id, title) {02. var data = {03. 'language': "en",04. 'api_version': '2'05. };06. var categoryId = id.split('-').pop();07. categoryId = typeof categoryId !== 'undefined' ? categoryId : "";08. 09. var url = SERVER_NAME;10. if (categoryId === "") {11. url += '/secret/all';12. }13. else {14. url += '/secret/category/' + categoryId;15. }16. url += '?callback=?';17. $.getJSON(url, data, function(json) {18. var messages = '';19. $.each(json.messages, function() {20. messagesViewModel.addMessage(this.id, this.message, this.machine_timestamp, this.human_timestamp, this.number_comments)21. });22. messagesViewModel['title'] = title;23. });24. app.application.navigate('messages.html');25.}updateMessages fills in the messagesViewModel:
1.var messagesViewModel = kendo.observable({2. messages: [],3. title: '',4. 5. addMessage: function(id, message, machineTimestamp, humanTimestamp, comments){6. this.messages.push({id:id, message:message, machineTimestamp: machineTimestamp, humanTimestamp: humanTimestamp, comments:comments});7. }, 8.})Which then gets shown in the view like this:
01.<!DOCTYPE html>02. 03.<html>04. <head>05. <title></title>06. </head>07. <body>08. <div id="messageList" data-role="view" data-title="Secrets" data-model="messagesViewModel">09. <div id="messagesViewContent" data-role="content">10. <!-- list of secrets -->11. <ul id="messageList" data-role="listview" data-bind="source: messages" data-template="messagesTemplate" data-auto-bind="false">12. </ul>13. </div>14. 15. <script type="text/x-kendo-template" id="messagesTemplate">16. <a id="#:id#" href="messageDetails.html?id=#:id#&message=#:message#">17. <p>#:message#</p>18. </a>19. </script>20. </div>21. </body>22.</html>The problem is that everytime I click on a category the array just keeps on filling up. I want to empty the array before adding new messages. I tried to add a clearMessage function in the viewmodel that executed: this.messages.length = 0. This cleared the array but in the view model you can still see all the old messages. How can I remove those messages everytime this view is called upon.
1 Answer, 1 is accepted
0
Hello Stefan,
You can use something like messagesViewModel.set('messages', []);
Apart from clearing the array, this will notify the databound widgets about the change applied.
Regards,
Petyo
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
You can use something like messagesViewModel.set('messages', []);
Apart from clearing the array, this will notify the databound widgets about the change applied.
Regards,
Petyo
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.