鈦Appcelerator表視圖堆疊在彼此之上

Question

我正在爲一個事件的iPhone應用程序工作，我必須建立一個'第一週或第二週或所有（默認）發生的'展館'表。

我的問題是，當單擊過濾到第1周或第2周的選項卡欄時，它會在現有表視圖的頂部繪製新的表格行/列表。

我相信這是一個簡單的修復，但我似乎無法弄清楚。我簡化了代碼，以簡化它：

var mac_addy = Titanium.Platform.macaddress; 
var win = Titanium.UI.currentWindow; 

win.backgroundImage = 'backs/pavilions_background.jpg'; 
win.backgroundRepeat = 'no-repeat'; 

var xmlHttp = null; 

function api_load(api_params) { 
    var rowData = []; 
    var loader = Titanium.Network.createHTTPClient(); 

// Sets the HTTP request method, and the URL to get data from 
loader.open("GET","http://example.com/api/?pavilions-week="+api_params+"&mac="+mac_addy); 

//loader.setInterval([10000]); 

// Runs the function when the data is ready for us to process 
loader.onload = function() { 
    var api_data = eval('('+this.responseText+')'); 

    //alert(api_data.pavilions_week[0].pavilion_name); 

    var api_total = objectLength(api_data.pavilions_week); 
    //alert(api_total); 

    var api_whatever = api_total * 3; 

    var pavilion_loop = 0; 

    for (var i = 0; i < api_whatever; i = i + 3) { 
     var data_line = api_data.pavilions_week[pavilion_loop]; 

     //alert(data_line.media_content.file_url); 
     // Create a row and set its height to auto 
     var row = Titanium.UI.createTableViewRow({height:100, top:10, left:10, right:10, borderRadius:10, hasChild:true, test:'pavilion_profile.js', pav_id:data_line.id, backgroundColor:'#ffffff', header:''}); 
     // Create the view that will contain the text and avatar 
     var post_view = Titanium.UI.createView({ height:100, width:226, top:5, left:70, layout:'vertical' }); 

     var flag = Titanium.UI.createImageView({ 
      image:data_line.media_content.file_url, 
      width:50, 
      height:50, 
      left:10, 
      top:5 
     }); 

     var week = Titanium.UI.createImageView({ 
      image:'icons/week_'+data_line.pavilion_week+'.png', 
      width:50, 
      //height:'auto', 
      right:-10, 
      top:75, 
      bottom:0 
     }); 

     var star_path = ''; 

     if (data_line.pav_rating != '') { 
      if (data_line.pav_rating == undefined) { 
       star_path = 'icons/stars_0.png'; 
      } 
      else { 
       star_path = 'icons/stars_'+data_line.pav_rating+'.png'; 
      } 
     } 
     else { 
      star_path = 'icons/stars_0.png'; 
     } 

     var stars = Titanium.UI.createImageView({ 
      image:star_path, 
      width:50, 
      //height:'auto', 
      left:70, 
      top:75 
     }); 



     row.add(flag); 
     row.add(week); 
     row.add(stars); 


     // Create the label to hold the screen name 
     var user_lbl = Titanium.UI.createLabel({ 
      text:data_line.pavilion_name, 
      //left:55,  
      top:0, 
      bottom:2, 
      height:18, 
      textAlign:'left', 
      color:'#444444', 
      font:{ 
       fontFamily:'Trebuchet MS',fontSize:16,fontWeight:'bold' 
      } 
     }); 

     post_view.add(user_lbl); 

     // Create the label to hold the tweet message 
     var tweet_lbl = Titanium.UI.createLabel({ 
      text: data_line.pavilion_description,  
      top: 0, 
      height: 'auto', 
      //width: 220, 
      right:20, 
      textAlign: 'left', 
      font:{ fontSize:11 } 
      //borderWidth:1, 
      //borderColor:'#444444' 
     }); 

     post_view.add(tweet_lbl); 


     var st_title = 'Showtimes:'; 
     var st_line = 'Sorry you missed it!'; 

     var hr_title = 'Hours:'; 
     var hr_line = 'Sorry you missed it!'; 

     if (api_data.system.fest_week < data_line.pavilion_week) { 
      st_title = 'Future Showtimes:'; 
      st_line = data_line.showtimes; 

      hr_title = 'Future Hours:'; 
      hr_line = data_line.hours_of_op; 
     } 
     else if (api_data.system.fest_week == data_line.pavilion_week) { 
      st_title = 'Today\'s Showtimes:'; 
      st_line = data_line.showtimes; 

      hr_title = 'Today\'s Hours:'; 
      hr_line = data_line.hours_of_op; 
     } 

     // ############################################################################## 

     var showtimes_line = Titanium.UI.createTableViewRow({ 
      width:290, 
      height:'auto', 
      top:135, 
      backgroundColor:'#ffffff' 
     }); 

     //row.add(showtimes_line); 


     var show_1 = Titanium.UI.createLabel({ 
      text: st_title, 
      height:'auto', 
      color:'#444444', 
      font:{ 
       fontSize:11, 
       fontWeight:'bold' 
      }, 
      left:10, 
      width:220, 
      top:5 
     }); 

     var show_2 = Titanium.UI.createLabel({ 
      text: st_line, //data_line.showtimes, 
      height:'auto', 
      color:'#444444', 
      font:{ 
       fontSize:11 
      }, 
      left:10, 
      top: 20, 
      bottom:5, 
      width:220 
     }); 

     showtimes_line.add(show_1); 
     showtimes_line.add(show_2); 

     if (data_line.dinner_rsrv == 'y') { 
      var dinner_icon = Titanium.UI.createImageView({ 
       image:'icons/dinner_s.png', 
       width:25, 
       height:30, 
       right:10, 
       top:5, 
       bottom:5 
      }); 

      showtimes_line.add(dinner_icon); 
     } 

     // ############################################################################## 


     // ############################################################################## 

     var hours_line = Titanium.UI.createTableViewRow({ 
      width:290, 
      height:'auto', 
      title:'', 
      hasChild:false, 
      backgroundColor:'#ffffff' 
     }); 

     //row.add(hours_line); 
     //rowData.push(hours_line); 

     var hour_1 = Titanium.UI.createLabel({ 
      text: hr_title, 
      height:'auto', 
      color:'#444444', 
      font:{ 
       fontSize:11, 
       fontWeight:'bold' 
      }, 
      left:10, 
      width:220, 
      top:5 
     }); 

     var hour_2 = Titanium.UI.createLabel({ 
      text: hr_line, //data_line.showtimes, 
      height:'auto', 
      color:'#444444', 
      font:{ 
       fontSize:11 
      }, 
      left:10, 
      top: 20, 
      bottom:5, 
      width:220 
     }); 

     if (data_line.late_night == 'y') { 
      var party_icon = Titanium.UI.createImageView({ 
       image:'icons/nite_party_s.png', 
       width:25, 
       height:30, 
       right:10, 
       top:5, 
       bottom:5 
      }); 

      hours_line.add(party_icon); 
     } 

     hours_line.add(hour_1); 
     hours_line.add(hour_2); 

     // ############################################################################## 

     // Add the post view to the row 
     row.add(post_view); 

     // Give each row a class name 
     row.className = "item" + i; 

     // Add row to the rowData array 
     rowData[i] = row; 

     var i1 = i + 1; 
     var i2 = i + 2; 

     rowData[i1] = showtimes_line; 
     rowData[i2] = hours_line; 

     //alert(i); 

     pavilion_loop++; 
    } 

    // Create the table view and set its data source to "rowData" array 
    var tableView = Titanium.UI.createTableView({ data : rowData,    style:Titanium.UI.iPhone.TableViewStyle.GROUPED, backgroundColor:'transparent' }); 




    // create table view event listener 
tableView.addEventListener('click', function(e) 
{ 
if (e.rowData.test) 
{ 
    var win = Titanium.UI.createWindow({ 
     url:e.rowData.test, 
     title:e.rowData.title 
    }); 

    win.pavilion_id = e.rowData.pav_id; 

    if (e.rowData.barColor) 
    { 
     win.barColor = e.rowData.barColor; 
    } 
    if (e.rowData.title_image) 
    { 
     win.titleImage = e.rowData.title_image; 
    } 
    Titanium.UI.currentTab.open(win,{animated:true}); 
} 
}); 




    //Add the table view to the window 
    win.add(tableView); 
}; 

// Send the HTTP request 
loader.send(); 
} 


Ti.UI.currentWindow.addEventListener('focus', function() { 
var api_stuff = '*'; 
api_load(api_stuff); 
}); 




// title control 
var tb4 = Titanium.UI.createTabbedBar({ 
labels:['All', 'Week 1', 'Week 2'], 
index:0, 
backgroundColor:'#336699', 
style:Titanium.UI.iPhone.SystemButtonStyle.BAR 
}); 
win.setTitleControl(tb4); 


//THIS SWITCHES TABS FOR WHICHEVER WEEK 
tb4.addEventListener('click', function(e) 
{ 
var actual_pav = '*'; 
if (e.index != 0) { 
    actual_pav = e.index; //+ 1; //l.text = 'You clicked index = ' + e.index; 
} 

api_load(actual_pav); 
}); 

非常感謝您的幫助！我很困難。

Answer 1

您正在xhr的onload事件內創建並添加表。這意味着每個呼叫都有一個新表。 先創建一個空表，將其添加到窗口，然後在onload中只使用setData（rowData）。