Question

TL; DR：collection.modify（）处理一些记录，但是在尝试一次修改10个以上记录时失败。为什么？

我有一些代码可以使用Javascript，HTML和IndexedDB上的Dexie包装器显示数据库并与之交互。问题出在这里：我一次只能修改几条记录。如果我尝试了超过8-10条记录，则 modify（）会失败，没有错误。

这是我调用数据库并绘制查询表的方式：

//Every time the page refreshes, the db is open and draws tables
$document.ready(function(){
//Open database
    db=new Dexie("peopleManager");
    db.version(1).stores({
        people: "id++, name, location"
    });
    //Call functions that draw query tables
    showDallas();
    showNewYork();
});

//Draws an HTML table of people who work in Dallas
function showDallas(){
    var output = '';
    db.people
        .where("location")
        .equals("Dallas")
        .each
        (function(people){
            output += "<tr align='center'>";
            output += "<td>"+people.id+"</td>";
            output += "<td>"+people.name+"</td>";
            output += "</tr>";
        $('#dallas').html(output);
        });
}

//Draws an HTML table of people who work in NY
function showNewYork(){
    var output = '';
    db.people
        .where("location")
        .equals("New York")
        .each
        (function(people){
            output += "<tr align='center'>";
        output += "<td>"+people.id+"</td>";
        output += "<td>"+people.name+"</td>";
        output += "</tr>";
        $('#newYork').html(output);
        });
}

这是不断失败的功能。点击HTML按钮即可将其触发：

//Move all to New York
function moveToNewYork(){
    db.transaction('rw', db.people, function(){
        db.people.where("location").equals("Dallas").modify({location: "New York"});
    }).then(function(){
        window.location.reload();
    }).catch(Dexie.ModifyError, function(e){
        console.error(e.failures.length + "failed to hire modify");
        throw e;
    });
}

HTML按钮：

<form role = "form" onSubmit = "moveToNewYork()">
<button type="submit" class="btn btn-primary">Move All</button></form>

我最多只能修改10条记录。十个以上，页面刷新，数据库没有变化，也没有记录错误。在the documentation之后，但还没有看到 modify（）需要更改10条以上记录的示例。在找到一定数量的记录后，我没有发现任何显示 modify（）事务失败的信息。

任何人都知道我在做错什么，或者如何进一步解决此问题？

请注意，实际代码很长，正在进行约20项其他只读操作。

更新：这是显示错误的full JSFiddle。有了这些（非常小的）记录，我可以在 modify（）开始失败之前达到12-15。奇怪的是，再次随机单击几次可以使 modify（）正常工作8次？我完全迷住了。

Answer 1

直到我用一千记录填充数据库后，我才设法对其进行复制。之后，在存储项目之前，页面过早开始重新加载。

我在JSFiddle上遇到的错误与您描述的不完全相同，在尝试重新加载页面时，页面打了404错误，但我认为我知道发生了什么。

由于window.location.reload()，页面无法重新加载。相反，表单的Submit事件冒泡至其默认行为，因为未在任何地方明确阻止它。所以有一个竞赛条件；当只有一个很小的数据集时，Dexie设法在表单重新加载页面之前完成工作。随着数据集的增长，更改将花费更长的时间，并且表单的Submit事件将赢得比赛。

要解决此问题，请从onsubmit回调中返回false，以防止出现默认的提交行为。

HTML：

<form role="form" onSubmit="return moveToNewYork()">
                            ^^^^^^ add "return" here

JS：

function moveToNewYork() {
  db.transaction('rw', db.people, function() {
    db.people.where("location").equals("Dallas").modify({
      location: "New York"
    });
  }).then(function() {
    window.location.reload();
  }).catch(Dexie.ModifyError, function(e) {
    console.error(e.failures.length + "failed to hire modify");
    throw e;
  });

  return false;  // add "return false" here
}

并且还将相同的更改添加到其他修改形式和功能中。

相关：SO - How to prevent form from being submitted。

Dexie Modify（）失败，没有引发错误

1 个答案: