我们如何在钛合金网格视图项目中实现Onclick功能

Question

我已经使用小部件开发了gridview应用程序（来自此代码）

https://github.com/pablorr18/TiDynamicGrid

我已经按照我的客户要求修改了代码。 现在，如果我想单击列表项上的“查看购物车”按钮，它将提醒该消息，例如“我被点击”。 但是我尝试了各种方法。但是找不到解决方案。 谁能解释一下我们如何为此编写代码。

我在我的应用程序中遵循以下代码：

var items = [];
var showGridItemInfo = function(e){
    alert("Onclick the row");
}; 

var delay = (OS_ANDROID) ? 1000:500;

$.tdg.init({
    columns:3,
    space:5,
    delayTime:delay,
    gridBackgroundColor:'#e1e1e1',
    itemBackgroundColor:'#fff',
    itemBorderColor:'transparent',
    itemBorderWidth:0,
    itemBorderRadius:5,
    onItemClick: showGridItemInfo
});

function createSampleData(){
    var sendit = Ti.Network.createHTTPClient({ 
        onerror: function(e){ 
            Ti.API.debug(e.error); 
            alert('There was an error during the connection'); 
        }, 
        timeout:10000, 
    });           
    sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&categoryid='+subcategorylist_category_id+'&productmin=0&productmax=50');  

    sendit.send(); 
    sendit.onload = function(){ 
        var response = JSON.parse(this.responseText); 
        if(response[0].success == 0){
            alert("No Products Found");
        }
        else {
            items = [];   
            for (var x=0;x<response[0].data.length;x++){
                var view = Alloy.createController('item_layout',{
                    image:imageurl+response[0].data[x].thumb_image,
                    product:response[0].data[x].product,
                    productprice:"$"+" "+response[0].data[x].price,
                    onItemClick: addcart,
                }).getView();
                var values = {
                    product: response[0].data[x].product,
                    image: response[0].data[x].thumb_image,
                    productid : response[0].data[x].productid,
                };
                items.push({
                    view: view,
                    data: values
                });
            };
            $.tdg.addGridItems(items);
            reateSampleData();

            $.tdg.clearGrid();
            $.tdg.init({
                columns:nColumn,
                space:nSpace,
                delayTime:delay,
                gridBackgroundColor:'#e1e1e1',
                itemHeightDelta: 0,
                itemBackgroundColor:'#fff',
                itemBorderColor:'transparent',
                itemBorderWidth:0,
                itemBorderRadius:5,
                onItemClick: showGridItemInfo
            });
            createSampleData();

        });

        $.win.open();

item_layout.xml代码如下所示：

<Alloy> 
    <View id="mainView"> 
        <ImageView id="thumb"/> 
        <Label id="product"></Label> 
        <Label id="productprice"></Label> 
        <Button id="addcart" onClick="additemtocart"/> 
    </View>
</Alloy>

编辑：

现在从指定的视图获取视图和按钮ID。 但是，如果试图单击该按钮，则意味着无法执行此操作。 您可以检查我的代码并提供解决方案吗？

我添加了以下代码：

var view = Alloy.createController('item_layout',{
        image:imageurl+response[0].data[x].thumb_image,
        product:response[0].data[x].product,
        productprice:"$"+" "+response[0].data[x].price
    }).getView();
    var controller = Alloy.createController('item_layout'); 
     var button = controller.getView('addcart');
    button.addEventListener('click', function (e){
    alert("click");
     Ti.API.info('click');
    });

Answer 1

首先将ID切换为类，因为它们不唯一。 仅在必要时使用ID。 其次，尝试这样的事情：

尝试这样的事情：

$('.addCart').click(function() {
    var item = $(this).silblings('.product').text;
    addItemToCart(item);
});

更好的是，将data-productId属性添加到购物车按钮，您可以执行以下操作：

$('.addCart').click(function() {
    var itemId = $(this).attr('data-productId');
    addItemToCart(itemId);
});

这样做会更好，因为您只需要在屏幕上显示购物车按钮即可。

综上所述，当页面上没有javascript时，您可能还需要添加一个后备项，将其添加到购物车中。