javascript - 无法将数据列表添加到合金钛的 tableRow 中

Question

// Controller .js

 $.tblRow_CurrentRow = [];

 var currentList = [
    {plan:' Plan1',date:'18 Feb 2014',tier:'one'},
    {plan:'Plan2',date:'18 Dec 2013',tier:'two'},
    {plan:'Plan3',date:'20 Feb 2014',tier:'three'},
  var data = [];


    for(var i=0;i < currentList.length ;i++){

    if(i%2 == 0){

        $.tblRow_CurrentRow[i].backgroundColor = "#FFFFFF";
    }

    else{

        $.tblRow_CurrentRow[i].backgroundColor = "#ABC012";
    }

    // Set text data to the label 
    $.lbl_Plan.text = currentList[i].plan;
    $.lbl_Date.text = currentList[i].date;
    $.lbl_Tier.text = currentList[i].tier;

    // Adding label to the TableRow!
    $.tblRow_CurrentRow[i].add($.lbl_Plan);
    $.tblRow_CurrentRow[i].add($.lbl_Date);
    $.tblRow_CurrentRow[i].add($.lbl_Tier); 

            data.push($.tblRow_CurrentRow[i]);
 }

$.tbl_TabeleView.data = data;

// Controller .xml

<TableView id = "tbl_TabeleView" >

    <TableViewRow id= "tblRow_CurrentRow">

        <Label id = "lbl_Plan"></Label>
        <Label id = "lbl_Date"></Label>
        <Label id = "lbl_Tier"></Label>

    </TableViewRow>

</TableView>

将 dataList 添加到合金钛的 tableviewRow 时出现问题。

错误信息 message = "'undefined' 不是一个对象(正在计算 '$.tblRow_CurrentRow[i].add')";

Answer 1

在您看来，您将 $.tblRow_CurrentRow 定义为单个 TableViewRow。您不能将其视为 Controller 中的对象数组。我修复了您的代码以使其正常工作，因此您可以看到它应该如何:

index.js:

$.tblRow_CurrentRow = [];

 var currentList = [
    {plan:' Plan1',date:'18 Feb 2014',tier:'one'},
    {plan:'Plan2',date:'18 Dec 2013',tier:'two'},
    {plan:'Plan3',date:'20 Feb 2014',tier:'three'},
];

var data = [];


for (var i=0; i < currentList.length; i++){
    $.tblRow_CurrentRow[i] = $.UI.create('TableViewRow', {
        backgroundColor: (i % 2 === 0 ? '#FFFFFF' : '#ABC012'),
        layout: 'vertical',
    });

    // Set text data to the label
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].plan } )
    );
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].date } )
    );
    $.tblRow_CurrentRow[i].add(
        $.UI.create('Label', { text: currentList[i].tier } )
    );

    data.push($.tblRow_CurrentRow[i]);
}

$.tbl_TabeleView.data = data;

$.getView().open();

index.xml:

<Alloy>
    <Window>
        <TableView id="tbl_TabeleView" />
    </Window>
</Alloy>

基本上， View 模板仅包含简单的 Window 和空的 TableView，我们将在其中添加行。在 for 循环中，我创建 TableViewRow 对象，设置不同的背景，然后添加您需要的所有 3 个标签。

垂直布局让我们可以很好地一个接一个地显示标签。
方法 $.UI.create('TableViewRow') 只是 Ti.UI.createTableViewRow(); 的更好版本。如果您感到困惑，您可以替换它们。