0

ここで何が問題なのか理解できません。データベースからイベントのリストを取得し、コールバック onclick メソッドを使用して、それらを表示するカスタム リストを作成しようとしています。正しい値を取得し、正しく表示しますが、onClick メソッドは、独自の値ではなく、最後の項目 ID の値を取得します。

したがって、リスト内のアイテムのいずれかをクリックすると、アラートが表示されます

show itinerary for event: 10

正しい ID の代わりに (現在 10 個のイベントがあります)

これは、データベースから取得したアイテムを処理する方法です。

function gotEvents(transaction, result) {
             var eventList;
             var myDbElements = $('#myDbElements');            
             var params = {
                items:result.rows.length,
                hasImage:false,
                content:[]
             }
                   if (result != null && result.rows != null) {

                       for (var i = 0; i < result.rows.length; i++) {
                          var row = result.rows.item(i);
                          var rowText = row["Name"] + '<br/>' +  row["Start"].slice(0,9);                    


                          var rowId = row["id"];
                          var contentItems = {
                            text: rowText,
                            onClick: function(){ showEventItinerary(rowId) }

                          }
                           params.content.push(contentItems);                      
                          }
                          for (var j=0; j<result.rows.length;j++){
                            PrecAppPersistence.debugObject(params.content[i]);
                          }
                          eventList = PrecAppComponents.myList(params,$('#eventsList'));
                   }
                PrecApp.I_SCROLL.refresh();   
               }


            function showEventItinerary(event_ID) {
                alert("show itinerary for event:"+event_ID);
            }

リストの作成方法は次のとおりです。

function List() {

var self;
var items;
var firstRun = true;

this.initialize = function(params,cont) {
    self = this;
    var container = cont;

    var items;
    container.empty();
    opt = {
            items:0,
            content:[], // array with the content. Default is = {text:text,icon:imageURL,onClick: function(){}}  itemId // not sure if we need this yet. supposed to be a manual ID for the item. EX: id taken from the db.                                         
            width: 300,
            hasImage: false, //set true if you want to show an images
            margin:10, //margin between items               


    }
    for (i in params) opt[i] = params[i];

    items = opt.items;
    container.width(opt.width);

    for (i=0;i<items;i++){

        itemToAdd = '<div class="listItem" id="listItem'+i+'">'; //add IDS to add click                        
        if (opt.hasImage) {
            itemToAdd += "<img src=" + opt.content[i].image + " />";
        }               
        itemToAdd += "<p>" + opt.content[i].text + "</p>";
        itemToAdd += "<div class='clearFix'></div>";
        itemToAdd += '</div>';      
        container.append(itemToAdd); //original #scroller might change?     

        listItem = $('#listItem'+i);    
        listItem.css('margin',opt.margin + 'px 0');
        listItem.on('click',opt.content[i].onClick);            

    }


}}

変数をログに記録しています。rowId には正しい ID があります。また、onClick ログには、すべての項目について次のように表示されます。

onClick:function (){ showEventItinerary(rowId )}(これが正しいかどうかはわかりません。変数rowIDの代わりにrowIDの値を表示するべきではありませんか?)

ここで何か見逃しましたか？

ありがとう

4

2 に答える 2

1

インデックス i がループで更新されるため、クロージャーを作成する必要があります。

for (var i = 0; i < result.rows.length; i++) {(function(index){
// use index instead of i inside your loop
...
// end closure
})(i);
// end loop
}

自己呼び出し関数は index=i で実行されます。i はループの一部であり、その値は変更されますが、ループ内の各関数は独自のインデックスを保持します。

于 2012-11-21T18:07:19.757 に答える
1

rowID配列を使用して各項目をループに格納するか、 a を使用しclosureて反復ごとに個別のスコープを作成するためのブロック レベルのスコープはありません。

悪名高いループ問題をチェックする

于 2012-11-21T18:26:06.553 に答える