动态生成按钮并使用JSON将变量传递到新窗口

时间:2013-01-25 07:50:19

标签: json titanium-mobile

首先我是初学者,这是我的第一个应用程序。我已经在这个应用程序上工作了好几天而且我被卡住了。在页面remote_read-org-3.js上我创建了一个状态列表按钮。这些是从mySQL数据库中提取的。这部分正在运作。单击按钮时,我需要将stateabbr传递到下一个窗口。问题是无论我点击哪个按钮,它都会传递列表中的最后一个状态。 这是remote_read-org.js它可能不是最干净的代码,但我仍在研究如何使用

var currentWin = Ti.UI.currentWindow;

var view02 = Titanium.UI.createView({
         top:0,
        left:0,
        height: '100%',
        width: '100%',
        backgroundImage: 'images/wcs_background_2.jpg',
})

var label01 = Titanium.UI.createLabel({
    text: "US STATES",
    top:25,
    left:125,
    height:'auto',
    width:'175',
    textAlign: "left",
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:24},
    color: "#1c1e3b",
})

var label02 = Titanium.UI.createLabel({
    text: "Attachments",
    top:50,
    left: 125,
    height:'24',
    width:'150',
    textAlign: "left",
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:18},
    color: "#1c1e3b",
})

var view01 = Titanium.UI.createView({
        top:90,
        left:70,
        height: 375,
        width: Ti.UI.FILL,
})

var currentWin = Ti.UI.currentWindow;

var sendit = Ti.Network.createHTTPClient();
sendit.open('GET', 'http://localhost/test/read.php');
sendit.send();
sendit.onload = function(){
    var json = JSON.parse(this.responseText);

    var json = json.states;

    var dataArray = [];

    var scroller =  Ti.UI.createScrollView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
});

    var brandView = Ti.UI.createView({   //Primary view for buttons
        title: 'Hello',
        top:0,
        left:0,
        height      : Ti.UI.FILL,
        width       : Ti.UI.FILL,
        contentHeight : "auto",
        backgroundColor : "transparent",
        layout      : "horizontal",
        horizontalBounce :false,
});

scroller.add(brandView);

view01.add(scroller);

    var pos;
    for( pos=0; pos < json.length; pos++){

        dataArray.push({title:'' + json[pos].stateAbbr + ''});
        // set the array to the tableView
        var btn = Ti.UI.createButton({
        title: json[pos].stateAbbr,
        width: 60,
        height: 70,
        top: pos * 0, // space the buttons at 105
        left: 2,
        backgroundImage: 'images/state_icon.png', 
        MyID: json[pos].stateAbbr,
    });

    btn.addEventListener('click', function(e) { 

        var newWindow = Titanium.UI.createWindow({ 
            url: 'remote_read_acc.js', 
            MyID: btn.MyID
            }); 
newWindow.open(newWindow);

});

    brandView.add(btn);

    };

};

var brandView = Ti.UI.createView({
});

view02.add(view01);

view02.add(label01);
view02.add(label02);

currentWin.add(view02);

我需要将stateabbr传递给这个新窗口 remote_read_acc.js

var currentWin = Ti.UI.currentWindow;

var view02 = Titanium.UI.createView({
         top:0,
        left:0,
        height: '100%',
        width: '100%',
        backgroundImage: 'images/wcs_background_2.jpg',
})

var label01 = Titanium.UI.createLabel({
    text: "US STATES",
    top:25,
    left:125,
    height:'auto',
    width:'175',
    textAlign: "left",
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:24},
    color: "#1c1e3b",
})

var label02 = Titanium.UI.createLabel({
    text: "Attachments",
    top:50,
    left: 125,
    height:'24',
    width:'150',
    textAlign: "left",
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:18},
    color: "#1c1e3b",
})

var view01 = Titanium.UI.createView({
        top:90,
        left:90,
        height: 375,
        width: Ti.UI.FILL,
})

var currentWin = Ti.UI.currentWindow;

var sendit = Ti.Network.createHTTPClient();
sendit.open('GET', 'http://localhost/test/attachments.php');
sendit.send();
sendit.onload = function(){
    var json = JSON.parse(this.responseText);

    var json = json.attachments;

    var dataArray = [];

    var scroller =  Ti.UI.createScrollView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
});

    var brandView = Ti.UI.createView({   //Primary view for buttons
        title: 'Hello',
        top:0,
        left:0,
        height      : Ti.UI.FILL,
        width       : Ti.UI.FILL,
        contentHeight : "auto",
        backgroundColor : "transparent",
        layout      : "horizontal",
        horizontalBounce :false,
});

scroller.add(brandView);

view01.add(scroller);

    var pos;
    for( pos=0; pos < json.length; pos++){

        dataArray.push({title:'' + json[pos].attachmentName + ''});
        // set the array to the tableView
        var btn = Ti.UI.createButton({
        title: json[pos].attachmentName ,
        width: 190,
        height: 30,
        top: pos * 0, // space the buttons at 105
        left: 2,
        MyID: json[pos].attachmentName,
    });

    btn.addEventListener('click', function(e) { 

        var newWindow = Titanium.UI.createWindow({ 
            url: '', 
            }); 
newWindow.open(newWindow);

    brandView.add(btn);

    };

};


var brandView = Ti.UI.createView({
});


view02.add(view01);

view02.add(label01);
view02.add(label02);

currentWin.add(view02);

然后我还需要使用我传递的stateabbr来查询dataArray,只从数组中提取与stateabbr变量匹配的值。所以我可以在这个页面上显示它们。 任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

它正在传递列表中的最后一个状态,因为您在for循环中添加事件侦听器并忽略JavaScript范围规则(它们不是最容易理解的)。所以发生的事情是btn总是等于你创建的最后一个btn。相反,尝试使用每个source事件的click属性,这会将您的内部范围与for循环的外部范围分开:

btn.addEventListener('click', function(e) { 

    var newWindow = Titanium.UI.createWindow({ 
        url: 'remote_read_acc.js', 
        MyID: e.source.MyID // Get the actual button that was clicked
    }); 
    newWindow.open(newWindow);
});

为了进一步优化这一点,我会将事件监听器函数移到循环之外。此外,我不会使用窗口的url属性,因为这将打开一个完全不同的JavaScript上下文,这是非常重量级的,而是尝试使用require() CommonJS指令。