Listview not populated from model

2 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    1 posts
    Member since:
    May 2016

    Posted 05 Oct Link to this post

    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. 
    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: "noreply@audi.de"},
    128.                       {email: "noreply@microsoft.com"},
    129.                       {email: "noreply@fifa.com"}]
    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.}());

  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 07 Oct Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top