Titanium - Content Issue with Loops and Views

Question

Hi, I'm new to Titanium and in my project I'm looping over some JSON data that serves my app page titles and content. I have this function:

xhr.onload = function() {
    try {
    var myPages = JSON.parse(this.responseText);

    for (var c=0;c<myPages.length;c++){ 
      var title = myPages[c].title; // page title
      var content = myPages[c].content; // page content

I've added my page titles to a TableViewRow as a label:

      var row = Ti.UI.createTableViewRow({hasChild:true,height:Ti.UI.SIZE,backgroundColor:bgcolor});

      // Create a vertical layout view to hold all the titles
      var post_view = Ti.UI.createView({
          height: Ti.UI.SIZE,
          layout:'vertical',
          left:5,
          etc..
      });          

      // Create article titles
      var label_title = Ti.UI.createLabel({
          text:title,
          left:5,
          etc...
      });

    // Add the article titles to the view
    post_view.add(label_title);

    // Add the vertical layout view to the row
    row.add(post_view);
    row.className = 'item'+c;
    data[c] = row;

This all works fine, I get a table with my page titles in each row, but when the user clicks a title I want the app to open a new view/window to display the content of the corresponding page. This is where my trouble starts!

I added this function to try and handle that situation:

    // Add an event listener to the rows
    row.addEventListener('click', function(){
        Titanium.API.info('row has been clicked');

        // Create view for article content
        var articleView = Titanium.UI.createView({
            height: Ti.UI.SIZE,
            layout:'vertical',
            left:5,
            etc..
        });

        var t = Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT;
        win.animate({view:articleView,transition:t});

        var articleViewContent = Ti.UI.createLabel({
            text:content,
            left:5,
            etc..
        });

        // Add the content to the view
        articleView.add(articleViewContent);

     });
     }

    // Create the tableView and add it to the window.
    var tableview = Titanium.UI.createTableView({data:data,minRowHeight:58});
    win.add(tableview);

    }
    catch(E){
        alert(E);
    }
};

I can get a response to the title click input to show in the console, but I can't figure out how to call the corresponding content in the new view. I think the counter should have this stored (from when the titles were created) but don't know how to access it.

I'm a bit lost and feel like I might be messing up some of the fundamentals here. I'm relatively new to JavaScript as well so please excuse any mistakes! It would be great to get some advice to help me improve!

(I added some 'etc..' in the code to shorten things)

Ed Stenger Ed Stenger · Accepted Answer · 2014-12-16T19:57:04

First add some kind of content attribute to the row itself in order to later access it via a row click event. Adjust your row definition as follows:

var row = Ti.UI.createTableViewRow({
    content: content,  // contains the article content from myPages[c].content
    hasChild:true,
    height:Ti.UI.SIZE,
    backgroundColor:bgcolor
});

Then you need to pass the event to the callback function in your event listener for the row:

row.addEventListener('click', function(ev){

    Titanium.API.info('row has been clicked:'+JSON.stringify(ev)); // this will allow you to see the event's properties

    ...

    // you can access the content attribute of the row by using ev.row.content
    var articleViewContent = Ti.UI.createLabel({
        text:ev.row.content,
        left:5,
        etc..
    });
}

Titanium - Content Issue with Loops and Views

1 Answers