[Solved] Listview not populated from model

[Jean-Marc]

I'm trying to tweak the friends sample hybrid app to use it as a basis for my app.

I created a new view derived from the activities view which is supposed to display some news from an external source.

The #news-list-view is not being populated from the view, but when I created a dedicated #news listview independently from the view it works.

What am I missing here to get the view to work?

01.<div id="news-view" data-role="view" data-title="News" data-layout="main-nonav" data-model="app.newsView" data-show="app.newsView.newsViewModel.onShow" class="activities-view">
02.    <header data-role="header">
03.        <div data-role="navbar" class="header-text">
04.
05.            <span data-role="view-title"></span>
06.
07.            <a class="button-icon button-menu" data-role="button" href="#appDrawer" data-rel="drawer" data-align="left"></a>
08.        </div>
09.    </header>
10.    <div data-role="nav-bar">
11.        <a class="nav-button" data-align="left" data-icon="arrow-w" data-role="button" data-click="previousDay"></a>
12.        <span id="date">Today</span>
13.        <a class="nav-button" data-align="right" data-icon="arrow-e" data-role="button" data-click="nextDay"></a>
14.    </div>
15.    <!-- Displaying with news-list-view not working. Listview not initialized?-->
16.    <ul id="news-list-view" data-role="listview"  data-template="newsViewModelTemplate"
17.        data-bind="source: newsViewModel.dataSource" data-pull-to-refresh="true" data-endless-scroll="true" data-use-native-scrolling="true">
18.    </ul>
19.
20.    <script type="text/x-kendo-template" id="newsViewModelTemplate">
21.        <div class="content">
22.            <div class="content-header">
23.                <a href="#: data['url'] #" data-rel="external" target="_blank"> #: data['title'] #</a>
24.            </div>
25.        </div>
26.    </script>
27.
28.    <!--This way of displaying the listview works -->
29.    <ul id="news"></ul>
30.
31.</div>

The JS source for the view + model is the following (model defined from line 181):

001.'use strict';
002.
003.var companies = new Array();;
004.var headlines;
005.var startDate;
006.var endDate;
007.headlines = new kendo.data.DataSource({
008.    group: { field: "company" },
009.    pageSize: 5,
010.    change: function () {
011.        //refresh();
012.    }
013.});
014.
015.function previousDay(){
016.    var prev = startDate.setDate(startDate.getDate()-1);
017.    fetch(prev);
018.}
019.
020.function nextDay(){
021.    var next = startDate.setDate(startDate.getDate()+1);
022.    fetch(next);
023.}
024.
025.function refresh(){
026.    fetch(startDate);
027.}
028.
029.var domains_blacklist = ["gmail","googlemail","gmx","web", "yahoo","hotmail","outlook","brandmaker"];
030.
031.
032.function checkSimulator() {
033.    if (window.navigator.simulator === true || window.plugins === undefined || window.plugins.calendar === undefined) {
034.        // Notify: Calendar plugin not available. Using default companies...
035.        return true;
036.    } else {
037.        return false;
038.    }
039.}
040.
041.// https://gist.github.com/bennadel/9751624#file-code-1-js
042.function GetEmailParts( strEmail ){
043.    // Set up a default structure with null values
044.    // incase our email matching fails.
045.    var objParts = {
046.        user: null,
047.        domain: null,
048.        ext: null
049.    };
050.
051.    // Get the parts of the email address by leveraging
052.    // the String::replace method. Notice that we are
053.    // matching on the whole string using ^...$ notation.
054.    strEmail.replace(
055.        new RegExp( "^(.+)@(.+)\\.(\\w+)$" , "i" ),
056.
057.        // Send the match to the sub-function.
058.        function( $0, $1, $2, $3 ){
059.            objParts.user = $1;
060.            objParts.domain = $2;
061.            objParts.ext = $3;
062.        }
063.        );
064.
065.
066.    // Return the "potentially" updated parts structure.
067.    return( objParts );
068.}
069.
070.function extractCompanies(event){
071.    if(event.attendees != null){
072.        for(var i=0; i<event.attendees.length; i++){
073.            var email = "";
074.            if(event.attendees[i].email != null){
075.                email = event.attendees[i].email;
076.            }
077.            if(email == "" && event.attendees[i].URL != null){
078.                email = event.attendees[i].URL.substring(7);
079.            }
080.            var parts;
081.            if(parts = GetEmailParts(email)){
082.                var company = parts.domain;
083.                if(companies.indexOf(company) == -1 && domains_blacklist.indexOf(company) == -1){
084.                    companies.push(company);
085.                    loadNews(company);
086.                }
087.            }
088.        }
089.    }
090.}
091.
092.// callbacks
093.function onSuccess(msg) {
094.    app.utils.loading(true);
095.    msg.forEach(extractCompanies);
096.    app.utils.loading(false);
097.    //console.error(JSON.stringify(headlines));
098.}
099.
100.function onError(msg) {
101.    showNotification('Calendar error: ' + JSON.stringify(msg));
102.}
103.
104.function getCompanies(date){
105.    if(date != null && date != undefined){
106.        startDate = new Date(date);
107.        endDate = new Date(date);
108.        $("#date").html(startDate.getDate()+"."+(startDate.getMonth()+1)+".");
109.    }else{
110.        startDate = new Date();
111.        endDate = new Date();
112.        $("#date").html("Today");
113.    }
114.
115.    // current day
116.    startDate.setHours(0);
117.    endDate.setHours(24);
118.    startDate.setMinutes(0);
119.    endDate.setMinutes(0);
120.    startDate.setSeconds(0);
121.    endDate.setSeconds(0);
122.
123.    if (checkSimulator() === true || window.plugins.calendar == undefined) {
124.        // Notification 'No access to calendar, showing demo companies.'
125.        var dummyMsg = new Array();
126.        dummyMsg = [{"id": "1",
127.            "attendees": [{email: "[e-mail]"},
128.                       {email: "[e-mail]"},
129.                       {email: "[e-mail]"}]
130.        }];
131.        onSuccess(dummyMsg);
132.    }else{
133.        // get all events of next 2 days
134.        window.plugins.calendar.findEvent("", "", "", startDate, endDate, onSuccess, onError);
135.    }
136.}
137.
138.function loadNews(query, index, array) {
139.    $.bingSearch({
140.        urlBase: "http://ginkeo.com/briefme/searchproxy.php",
141.        pageNumber: 1,
142.        pageSize: 5,
143.        query: query,
144.        debug: false,
145.        beforeSearchResults: function(data) {
146.            //var headlines = [];
147.        },
148.        searchResultIterator: function(data) {
149.            if(data == undefined){
150.                alert("No data");
151.            }else{
152.                headlines.add({company: query, title: data.Title, url: data.Url});
153.            }
154.        },
155.        afterSearchResults: function(data) {
156.            //console.error(JSON.stringify(headlines));
157.        }
158.    });
159.}
160.
161.function fetch(date){
162.
163.    getCompanies(date);
164.
165.    if (headlines.data.length > 0) {
166.        $("#news").kendoMobileListView({
167.            dataSource: headlines,
168.            template: '<a href="#: url #" data-rel="external" target="_blank">#: title #</a>'
169.        });
170.    }/*else{
171.        Notification no news
172.    }*/
173.}
174.
175.(function () {
176.
177.    var view = app.newsView = kendo.observable();
178.
179.    app.newsView.shouldRefresh = true;
180.
181.    var newsViewModel = kendo.observable({
182.        dataSource: headlines.dataSource,
183.        refreshOnShow: true,
184.        onShow: function () {
185.            if (app.newsView.shouldRefresh) {
186.
187.                refresh();
188.                //console.log("read = "+JSON.stringify(headlines));
189.                app.newsView.shouldRefresh = false;
190.            } else if (!headlines.data().length) {
191.                app.utils.loading(true);
192.            }
193.        },
194.    });
195.    //console.log(JSON.stringify(newsViewModel));
196.    view.set('newsViewModel', newsViewModel);
197.
198.}());

[Tsvetina]

Hi Jean-Marc,

Your declaration of the ListView seems correct. Is it possible that your DataSource isn't populated with data when the view loads? You can check the value of:

$("#news-list-view").data("kendoMobileListView").dataSource.data().length

when the view is shown, to confirm if there is data available.
Also, in the view model, you set the DataSource like this:

dataSource: headlines.dataSource

but I don't see you assigning a dataSource property to the headlines object before that. Am I missing anything?

Regards,
Tsvetina
Telerik by Progress