locked
External JSON with ListView

    Question

  • I'm trying to convert a code to jQuery WinJS. The code is as follows..

    $(function(){
     var qtd;
     var return;
     var categories;
     
     $.getJSON("http://mysite.com/api/?json=get_latests_posts&callback=?",
     function(data) {
      this.qtd = data.count;
      this.return = '';
      this.categories = '<div class="groupHeader"><h1>Latets News</h1></div>';
     
      for (i = 0; i < this.qtd; i++){
       this.return += '<div id="item post-' + data.posts[i].id +' ' + data.posts[i].type +' ' + data.posts[i].categories.id + ' ' + data.posts[i].categories.slug + ' ' + data.posts[i].tags + '">';
       this.return += '<div class="largeTileTextBackground">' + data.posts[i].thumbnail + '</div>';
       this.return += '<div class="largeTileTextOverlay"><div class="largeTileTextLargeText"><h2 id="post-title">' + data.posts[i].title + '</h2></div>';
       this.return += '<div class="largeTileTextSmallText"><p id="post-meta">' + data.posts[i].author.nickname + ' in ' + data.posts[i].date + ' | ' + data.posts[i].comment_count + '</p></div>';
       this.return += '</div>';
      };
     
      $('.posts').html(this.categories+this.return);
     });
    });

    What I want is to do the same, but using WinJS with ListView. The beginning looks like this..

        document.addEventListener("DOMContentLoaded", function (e) {
            WinJS.UI.processAll()
                .then(function () {

                    var basicListView = WinJS.UI.getControl(
                        document.getElementById("basicListView"
     ));
                    basicListView.dataSource = myDataSource;
                });
        });

    Now, would not know how this part..

        var myDataSource = new WinJS.UI.ArrayDataSource([
            { title: "Banana", description: "Banana Frozen Yogurt", picture: "images/banana.jpg" },
            { title: "Orange", description: "Orange Sherbet", picture: "images/orange.jpg" },
        ]);

    Someone tell me how to do? I did not understand what was right in the WinJS references.

    Sunday, September 25, 2011 8:03 PM

Answers

  • I am a little unsure of exactly what you want to do, but it sounds like you have existing jQuery code that you'd like to convert to winJS.

    a) Presumably the size of the data is not that large, that you are happy to download it all in one go, and keep it in memory. If that's not the case, then you should create a custom datasource. Take a look at the Bing search scenario from http://code.msdn.microsoft.com/windowsapps/Custom-data-sources-example-8a58a0fc

    b) To implement the same functionality, you'll need 3 things:

    A datasource - in this case what you'll want to do is to download the data much as you do with jquery, you can use WinJS.xhr if you don't want to use jquery for that. And then format the data you get back if you need to trim out fields etc

    A Template - using a declarative template - look at the examples such as the one above. This will replace the programmatic markup generation you have above, and use databinding for mapping the template to the data.

    A ListView control that is fed both of them.

    <plug mode='shameless'> you might also want to check out my talk from build, which covered this and more ;-) http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-210T </plug>

    Wednesday, September 28, 2011 12:00 AM

All replies

  • I'm looking into this.

    I will follow up with you shortly.

    thanks

    Frank

    Tuesday, September 27, 2011 10:42 PM
    Moderator
  • I am a little unsure of exactly what you want to do, but it sounds like you have existing jQuery code that you'd like to convert to winJS.

    a) Presumably the size of the data is not that large, that you are happy to download it all in one go, and keep it in memory. If that's not the case, then you should create a custom datasource. Take a look at the Bing search scenario from http://code.msdn.microsoft.com/windowsapps/Custom-data-sources-example-8a58a0fc

    b) To implement the same functionality, you'll need 3 things:

    A datasource - in this case what you'll want to do is to download the data much as you do with jquery, you can use WinJS.xhr if you don't want to use jquery for that. And then format the data you get back if you need to trim out fields etc

    A Template - using a declarative template - look at the examples such as the one above. This will replace the programmatic markup generation you have above, and use databinding for mapping the template to the data.

    A ListView control that is fed both of them.

    <plug mode='shameless'> you might also want to check out my talk from build, which covered this and more ;-) http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-210T </plug>

    Wednesday, September 28, 2011 12:00 AM