2011-06-28 14 views
0

クロムのローカルデータベースから生成するアンカーのリストでdivを更新したいとします。これはかなりシンプルなものですが、データをmain.jsファイルにコールバック経由で追加しようとすると、すべてが突然定義されなくなります。または、配列の長さが0に設定されています(実際に18のとき)。データベースAPIを使用したChrome拡張機能

最初は新しい配列にインストールして戻しました。

データベースAPIとの通信を可能にするために、chrome manifest.jsonに指定する必要がある設定はありますか?

window.main = {}; 
window.main.classes = {}; 
(function(awe){ 
    awe.Data = function(opts){ 
     opts = opts || new Object(); 
     return this.init(opts); 
    }; 
    awe.Data.prototype = { 
     init:function(opts){ 
      var self = this; 
      self.modified = true; 

      var db = self.db = openDatabase("buddy","1.0","LocalDatabase",200000); 
      db.transaction(function(tx){ 
       tx.executeSql("CREATE TABLE IF NOT EXISTS listing (name TEXT UNIQUE, url TEXT UNIQUE)",[],function(tx,rs){ 
        $.each(window.rr,function(index,item){ 
         var i = "INSERT INTO listing (name,url)VALUES('"+item.name+"','"+item.url+"')"; 
         tx.executeSql(i,[],null,null); 
        }); 
       },function(tx,error){ 

       }); 
      }); 
      self._load() 
      return this; 
     }, 
     add:function(item){ 
      var self = this; 
      self.modified = true; 
      self.db.transaction(function(tx){ 
       tx.executeSql("INSERT INTO listing (name,url)VALUES(?,?)",[item.name,item.url],function(tx,rs){ 
        //console.log('success',tx,rs) 
       },function(tx,error){ 
        //console.log('error',error) 
       }) 
      }); 
      self._load() 
     }, 
     remove:function(item){ 
      var self = this; 
      self.modified = true; 
      self.db.transaction(function(tx){ 
       tx.executeSql("DELETE FROM listing where name='"+item.name+"'",[],function(tx,rs){ 
        //console.log('success',tx,rs) 
       },function(tx,error){ 
        //console.log('error',tx,error); 
       }); 
      }); 
      self._load() 
     }, 
     _load:function(callback){ 
      var self = this; 
      if(!self.modified) 
       return; 
      self.data = new Array(); 
      self.db.transaction(function(tx){ 
       tx.executeSql('SELECT name,url FROM listing',[],function(tx,rs){ 
        console.log(callback) 
        for(var i = 0; i<rs.rows.length;i++) 
        { 

         callback(rs.rows.item(i).name,rs.rows.item(i).url) 
         // var row = rs.rows.item(i) 
         // var n = new Object() 
         // n['name'] = row['name']; 
         // n['url'] = row['url']; 
        } 
       },function(tx,error){ 
        //console.log('error',tx,error) 
       }) 
      }) 
      self.modified = false 
     }, 
     all:function(cb){ 
      this._load(cb) 
     }, 
     toString:function(){ 
      return 'main.Database' 
     } 
    } 
})(window.main.classes); 

し、リストを更新するためのコードを次のようにコードがある

私がチェックしましたが、私は見つけることができましたすべてが「無制限のストレージ」でした。

this.database.all(function(name,url){ 
     console.log('name','url') 
     console.log(name,url) 

     var data = [] 
     $.each(data,function(index,item){ 
      try{ 
       var node = $('<div > <a href="'+item.url+'">'+item.name + '</a></div>'); 
       self.content.append(node); 
       node.unbind(); 
       node.bind('click',function(evt){ 
        var t = $(evt.target).attr('href'); 
        chrome.tabs.create({ 
         "url":t 
        },function(evt){ 
         self._tab_index = evt.index 
        }); 
       }); 
      }catch(e){ 
       console.log(e) 
      } 
     })  
    }); 

答えて

0

上記のコードを見ると、APIの各関数の最後に "self._load()"が実行されていることがわかります。 HTML5 SQLデータベースは非同期です。結果を保証することはできません。この場合、競合状態になるため、結果は常に0またはランダムであると仮定します。

私はあなたがWebインスペクタをチェックし、エラーがで発生するかどうかを確認でしたが、このような問題を解決するために、私はhttps://github.com/mohamedmansour/fb-exporter/blob/master/js/database.js

それを行っているかを確認すること自由に感じ、私のFB-輸出国の拡張子に似た何かを行っています背景ページ。私はこれがバックグラウンドページにあると思いますか?エラーが発生していないかどうかを確認してみてください。競合が発生したと思われます。コールバック内でロードを移動するだけで、ロードを適切に呼び出す必要があります。

unlimited storageマニフェスト属性の最初の質問については、この場合は必要ありませんが、それは問題ではありません。 Webデータベースの制限は5MBです(最後に思い出したように、変更されている可能性があります)。多くのデータ操作を使用している場合は、その属性を使用します。

データベースが初期化された後にthis.database.allが実行されていることを保証することができます。

関連する問題