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

Listview with viewmodel

1 Answer 8 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
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.                <!-- 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

Sort by
0
Petyo
Telerik team
answered on 22 Jan 2014, 08:30 AM
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.
Tags
General Discussions
Asked by
Stefan
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or