聚合物indexedDB鸡蛋里面的鸡蛋

时间:2014-09-30 22:50:53

标签: javascript polymer indexeddb

如何告诉鸡等待异步蛋数据库在聚合物中进行鸡功能read()

我的loadChanged不起作用?

<polymer-element name="my-chicken">
    <template>
        <style>
            p {font-family: 'RobotoDraft', sans-serif; padding:10px;}
        </style>

        <p>Loading...</p>

        <my-egg iLoad="{{load}}" iDB="{{db}}"></my-egg>

    </template>
    <script>
        Polymer('my-chicken', {

            load:false,
            db:null,
            out:null,

            write:function(){
                this.db.result.transaction(["store"], "readwrite").objectStore("store");
                var customerData = [
                    {muts: "Bill", qty: "1"},
                    {muts: "Donna", qty: "1"},
                ]
                for (var i in customerData){db.put(customerData[i])}
            },

            remove:function(k){
                this.db.result.transaction(["store"], "readwrite").objectStore("store");
                db.delete(k)
            },

           read:function(tx){
              var f =function(e) {
                var cursor = e.currentTarget.result;
                if (cursor) {
                    console.log(cursor.key)
                    var br=document.createElement('br')
                    var span=document.createElement('span')
                    span.innerHTML=cursor.key
                    span.onclick=function(){remove(cursor.key)}
                    this.out.appendChild(span)
                    this.out.appendChild(br)
                    cursor.continue()
                }
              }.bind(this)
              this.out.innerHTML=""
              var req = tx.openCursor()
              req.onsuccess = f
              console.log('hello')
            },

            ready:function(){
                this.out=this.shadowRoot.querySelector('p')
            }

            loadChanged:function(){
               console.log('hello')
               var tx=this.db.result.transaction(["store"], "readwrite").objectStore("store");
               this.read(tx)
            }    
        })
    </script>
</polymer-element>

<polymer-element name="my-egg" attributes="iDB iLoad">
    <script>
        Polymer('my-egg', {
            iDB:null,
            iLoad:false,
            ready:function(){

                var load=function(){
                  this.iLoad=true
                  console.log('iLoad',this.iLoad)
                }.bind(this)

                var request = indexedDB.open("my-database",1);
                request.onupgradeneeded = function(e) {
                    var db = e.currentTarget.result
                    var store = db.createObjectStore("store", {keyPath: "muts", autoIncrement:false})
                    console.log('db upgrade', 'v'+db.version)
                }
                request.onerror = function(e) {
                    console.error('db error ',e)
                }
                request.onsuccess = function(e) {
                    var db = e.currentTarget.result
                    console.log('db setup', 'v'+db.version, 'OK')
                    load()
                }
                this.iDB=request
            },
            drop: function () {
                this.iDB.result.close()
                var req = indexedDB.deleteDatabase(this.iDB.result.name);
                req.onsuccess = function() {console.log("Deleted database successfully")}
                req.onerror = function() {console.log("Couldn't delete database")}
                req.onblocked = function() {console.log("Couldn't delete database due to the operation being blocked")}
            }
        })
    </script>
</polymer-element>

1 个答案:

答案 0 :(得分:3)

简短回答?你等不及了。让你的代码简单地设置你的元素,这样如果还没有写任何东西,那么用户可见的状态是有意义的。然后只需更新一次&#34; egg&#34;已经完成了它的事情。如果该更新触发了计数器更新,则表示完全正常,并且您再次将其反映在用户可见状态中。

另外:可爱,因为它是为获得有用答案而命名的最差元素。由于它=)

,评论主题几乎完全脱轨