appceleratorのTableViewにプログラムで行を追加する方法

Question

appceleratorスタジオでアプリを構築していますが、私は合金を使用しています。

コントローラからTableViewにデータを挿入したいとします。

サイクルのために、私は私の中で3行を挿入するにはだからこれは私のの.xmlクラス

<Alloy> 
    <View class="container" > 
     <TableView id="table" class="table"> 
      <TableViewSection id="table" > 

      </TableViewSection> 
     </TableView> 

     <!-- <Button id="button" onClick="doClick"></Button>--> 
    </View> 
</Alloy> 

は、これが今の私のコントローラ

var view1 = Ti.UI.createView({ 
      left : 0, 
      width : "35%", 
      top: "30px" 
     }); 
     var view2 = Ti.UI.createView({ 
      left : "35%", 
      width : "25%", 
      top: "30px" 
     }); 
     var view3 = Ti.UI.createView({ 
      left : "60%", 
      width : "25%", 
      top: "30px" 
     }); 
     var view4 = Ti.UI.createView({ 
      left : "85%", 
      width : "15%", 
      top: "30px" 
     }); 

     view1.add(createHeader(L(lang+"social_history"))); 
     view2.add(createHeader(L(lang+"start_date"))); 
     view3.add(createHeader(L(lang+"end_date"))); 
     view4.add(createHeader(L(lang+"quantity_um"))); 

var row = Ti.UI.createTableViewRow(); 
var rowData = []; 

row.add(view1); 
row.add(view2); 
row.add(view3); 
row.add(view4); 

rowData.push(row); 

$.table.data=rowData; 

for(var i=0; i<3; i++){ 
    var myRow = Ti.UI.createTableViewRow({ 
     id: 'overview', 
     height: '47dip' 
    }); 
    var myLabel = Ti.UI.createLabel({ 
     text: 'Overview', 
     top: "0dip", 
     height: "47dip", 
     left: "5dip", 
     right: "5dip", 
     font: { 
      fontSize: "14dp", 
      fontWeight: "bold" 
     } 
    }); 

    myRow.add(myLabel); 
    // this is working, but directly after displaying this row, 
    // the collection is overwriting it again 
    $.table.appendRow(myRow); 
} 




function createHeader(headerText){ 
    var heading = Ti.UI.createView({ 
     backgroundColor : "#0c7b84" 
    }); 

    var headingText = $.UI.create("Label", { 
     classes: 'headerTableLabel' 
    }); 
    headingText.text = headerText; 

    heading.add(headingText); 

    return heading; 
} 

のコードです私のアプリケーションを実行しようとすると、私はこれらの他の行を見ることができません。

どうすれば修正できますか？

Answer 1

あなたが好き、合金を使用しているので、JS内の行を作成するのではなく、コントローラを使用してみてください：

row.xml

<Alloy> 
    <TableViewRow id="row"> 
     <Label id="title"/> 
     <ImageView id="icon"/> 
    </TableViewRow> 
</Alloy> 

row.js

var args = arguments[0] || {}; 

$.row.myValue = args.title; 

$.title.text = args.title; 

$.icon.image = args.icon; 

を表.js

var data = []; 

var yourArray = [ 
    {title:'england',icon:'en.png'}, 
    {title:'portugal',icon:'pt.png'}, 
    {title:'france',icon:'fr.png'} 
]; 

for(var i in yourArray) data.push(Alloy.createController('row',{ 
    title:yourArray[i].title, 
    icon:yourArray[i].icon 
}).getView()); 

$.table.setData(data); 

行（appendRow）を追加すると、以前のTableViewデータが消えますか？それは奇妙だ、あなたは回避策としてこれを行うことができます：

data.push(Alloy.createController('row',{ 
    title:'spain', 
    icon:'es.png' 
}).getView()); 

//data.length = 4 
$.table.setData(data); 

は、行データを取得する：あなたの応答のための

$.table.addEventListener('click',function(e) { 

    selected_index = e.index; 
    selected_row = e.row; 
    selected_my_value = e.row.myValue; //see the alloy row controller 
}); 

API Docs: TableView