Rethinkdb 使用 jQuery 更改提要渲染

Question

我目前正在尝试弄清楚如何使用来自 RethinkDB 的更改提要。

我有一个名为Calls 的表，在插入、删除和更新它时，我想流式传输更改。

现在，我有最初加载调用然后返回更改的功能：

r.db('test').table('Calls').run(function(err, cursor) {
    if (err) throw err;
    socket.emit('load calls', cursor);
});

r.db('test').table('Calls').orderBy({index: r.desc('call_number')})
.changes().run(function(err, cursor) {
    if (err) throw err;
    cursor.each(function(err, record) {
        socket.emit('load calls', record);
    });
});

在前端，我将 HTML 附加到页面：

socket.on('load calls', function(docs) {
    docs.map((call) => {
    $('.calls-list').append(`
    <tr id="call_${call.call_number}">
      <td>${call.call_number}</td>
      <td>${call.time}</td>
      <td>${call.type}</td>
      <td>${call.status}</td>
      <td>

     </td>
      <td>${call.location} - ${call.location_cross}</td>
      <td>${call.notes}</td>
      <td><a id="update-call-${call.call_number}" href=""><i class="edit icon yellow text"></i></a> <a id="archive-call-${call.call_number}" href=""><i class="delete icon red text"></i></a></td>
    </tr>
`);
    }
});

这里的问题是附加的 HTML 或多或少是永久的并且“独立于”数据库；我希望它像this video 一样实时并依赖于数据库更改提要。在这种情况下，数据库插入和 orderBy 是即时的。所以在我当前的问题中，如果有人想删除一个调用，那么我将不得不发出一个套接字事件并通过引用 ID 来删除相应的 HTML 元素。

Answer 1

我不确定我是否正确理解了您的问题，但我会尝试解决一些问题。首先，调用 changefeed 时返回的文档与调用 r.db.table（您的第一次调用）时返回的文档不同。您的第一次调用将返回数据库中的所有“调用”文档，但更改提要返回的文档包含先前的“调用”文档和新的“调用”文档。例如，当一个新的“呼叫”添加到数据库中时，您会看到以下内容：

{
    old_val: null,
    new_val: {id: 1, call_number: x, time: y, ...}
}

对于现有“呼叫”的更新，您会看到：

{
    old_val: {id: 1, call_number: x, time: y, ...},
    new_val: {id: 1, call_number: x2, time: y2, ...}
}

当“呼叫”被删除时，您会看到：

{
    old_val: {id: 1, call_number: x2, time: y2, ...},
    new_val: null
}

您将不得不以不同的方式处理每个场景。您可以在前端通过检查每个文档中是否有 old_val 和/或 new_val 来执行此操作。像这样的：

socket.on('load calls', function(docs) {
    docs.map((call) => {
        if (! call.old_val && ! call.new_val) {
            // this is a call returned from from r.db.table, not the changefeed
            // add call to the dom
        }
        else if (! call.old_val) {
            call = call.new_val;
            // this is a new call added to the db and returned from r.db.table.changes
            // add call.new_val to the dom
        }
        else if (! call.new_val) {
            // this is a delete - remove the row from the dom
        }
        else {
            // this is an update - update the existing row
        }
    }
});

或者您可以在服务器上进行某种级别的过滤并向客户端发出不同的事件。像这样的：

r.db('test').table('Calls').orderBy({index: r.desc('call_number')})
.changes().run(function(err, cursor) {
    if (err) throw err;
    cursor.each(function(err, record) {
        if (! record.old_val) {
            // new call added
            socket.emit('load calls', record);
        }
        else if (! call.new_val) {
            // call deleted
            socket.emit('delete calls', record);
        }
        else {
            // call updated
            socket.emit('edit calls', record);
        }
    });
});

然后在客户端上订阅每个事件：

socket.on('load calls', function(docs) {
    // add docs to dom
});

socket.on('edit calls', function(docs) {
    // update docs in dom
});

socket.on('delete calls', function(docs) {
    // delete docs from dom
});

希望这会有所帮助。仅供参考，我是您引用的视频/示例应用程序的作者 :) 感谢观看！