This is a migrated thread and some comments may be shown as answers.

Listview with viewmodel

1 Answer 89 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Stefan asked on 17 Jan 2014, 04:50 PM

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)

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. 

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.

Listview with viewmodel

1 Answer, 1 is accepted