我们如何在钛网格视图项中实现 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 时将商品添加到购物车中。