Wie wir die Onclick Funktionalität in Titan Rasteransicht Artikel implementieren kann

Question

ich die Gridview-Anwendung entwickelt haben, mit dem Widget (aus diesem Code)

https://github.com/pablorr18/TiDynamicGrid

ich den Code geändert haben, wie pro meine Anforderungen des Kunden. Wenn ich nun auf den Warenkorb-Button auf dem Listeneintrag klicke, wird die Nachricht wie "Bin angeklickt" angezeigt. Aber ich habe es auf verschiedene Arten versucht. Aber ich kann die Lösungen nicht finden. Kann mir bitte jemand erklären, wie wir den Code dafür schreiben.

Ich habe folgenden Code unten in meiner Anwendung:

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(); 

Der item_layout.xml Code sucht wie:

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

EDIT:

jetzt sind immer die Ansicht, und die Schaltflächen-ID aus der angegebenen Ansicht. Aber wenn ich versuche, den Knopf zu drücken, kann ich das nicht können. Kannst du meinen Code überprüfen und eine Lösung geben?

Ich habe den Code unten hinzugefügt:

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

erste Schalter den IDs Klassen, weil sie nicht eindeutig sind. Verwenden Sie nur IDs, wenn Sie müssen. Zweitens versuchen, etwas wie folgt aus:

versuchen, etwas wie folgt aus:

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

noch besser, ein data-productId Attribut auf die Schaltfläche den Warenkorb legen und Sie so etwas tun könnte:

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

Dies ist besser, da Sie nur die Einkaufswagen-Schaltfläche auf dem Bildschirm benötigen.

All dies sagte, Sie müssen wahrscheinlich auch ein Fallback enthalten, die den Artikel in den Warenkorb fügt, wenn JavaScript auf der Seite nicht verfügbar ist.