javascript - appceleratorでテーブルビューを折りたたむ方法

Question

Appcelerator アプリケーションに Expandable TableView を挿入したいと考えています。だから私はこのコードを見つけました：

var FoodBank = [];


function Food(head, backgroundColor, parentIndex, expand, childs){//Food object
    this.title =                 head;
    this.backgroundColor =         backgroundColor;
    this.parentIndex =             parentIndex;
    this.expand =                 expand;
    this.childs =                 childs;
    this.rightImage =             "/images/rowArrowRight.png";
}

function EmptyRow(){//EmptyRow object
    this.backgroundColor = "green";//change this to transparent to make the rows invisible
    this.selectedBackgroundColor = "transparent";
    this.ignore = true;
}

var fruit = new Food("Fruit", "transparent", 0, true, [
    {name:"Apple"},
    {name:"Mango",},
    {name:"Banana"},
    {name:"Orange"}]
);

var vegetable = new Food("Vegetable", "transparent", 1, true, [
    {name:"Carrot"},
    {name:"Potatoe"},
    {name:"Bringal"},
    {name:"Cabbage"}]
);

FoodBank.push(fruit);
FoodBank.push(vegetable);

for(var i = 0; i <= 4; i++)//add EmptyRow objects to the FoodBank. It needs 5 EmptyRow objects to escape the ugly animation which you get with too few tableViewRows
    FoodBank.push(new EmptyRow());//this also bypasses the no row found error

var table = Ti.UI.createTableView({
  data:                    FoodBank,
  height:                 Ti.UI.FILL,
  layout:                 "vertical",
  separatorColor:         "transparent",
  backgroundColor:        "transparent"
});  

 /**
  * Event listener on table which handles the expanding/ collapsing of the childs. 
  * Parsing to int because the event callback is String. Int is needed to define next row index in insertRowAfter(); 
  * Also handles child clicks.
  */
table.addEventListener("click", function(e){
    if(e.rowData.ignore){//empty row click
        console.log("Ignored");  
        return;//do nothing
    }
    var index = parseInt(e.index);//e callback is String, parse to int        
    var tableItem = e.rowData;//get table data    
    var parentIndex = parseInt(tableItem.parentIndex);//get parent index and parse to int
    if(!parentIndex && index > 0){//clicked child
        console.log("You've clicked child " + index);
        return;
    }
    if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click       
        tableItem.rightImage = "/images/rowArrowDown.png";
        for(var i in tableItem.childs){//loop through childs
            var child = tableItem.childs[i];//fetch child
            var row = Ti.UI.createTableViewRow({
                layout:             "vertical",
                height:             44,
                backgroundColor:     "pink"
            });
            var label = Ti.UI.createLabel({
                text:                 child.name,//set name
                height:                Ti.UI.SIZE,
                color:                "red",
                font:                 {
                                        fontWeight:"bold",
                                    }
            });             
            row.add(label);       
            table.insertRowAfter(parseInt(i) + index, row);
        }        
        console.log("Expanded parent " + index);
    }else if(!tableItem.expand){//if expand is false collapse the elements
        tableItem.expand = true;//will expand on next click
        tableItem.rightImage = "/images/rowArrowRight.png";
        for(var i in tableItem.childs)//loop through childs
            table.deleteRow(index + 1);   
        console.log("Collapsed parent " + index);     
    }
}); 

$.container.add(table);

アプリケーションを実行しようとすると、2 つの行が表示され、そのうちの 1 つをクリックしようとすると、この行の子が表示されますが、これは問題ありません。しかし、親行を再クリックしようとすると、子は削除されませんが、コードは他の子を挿入し、これは正しくありません。

私はデバッグを行い、この行で：

if(tableItem.expand){//if expand is true expand the elements
        tableItem.expand = false;//will collapse on next click   

その後、実行すると、expand = false の値が表示されますが、この行をクリックしようとすると、tableItem.expand の値が true になります。このため、行は折りたたまれているのではなく、毎回展開されます