使用 Firebase API 通过 x-editable 内联编辑处理 PUT (PATCH) 请求

Question

我目前正在使用以下库对我页面上的元素（对我 table 中的单元格）进行内联编辑：https://vitalets.github.io/x-editable/

从step 3 in their docs可以看出，当用户进行更改时，我可以立即更新我的数据库。

我正在为我的数据库使用 Firebase。使用 push() 方法将原始数据发送到 Firebase——因此每个唯一 ID 都是一个基于时间戳的 numbers/letters 随机字符串。

问题： x-editable 要求我提供一个 URL 来发送我的编辑，但是 Firebase 要求我使用他们的 update()方法来更改数据库中的数据。因此，我需要找出一种仅使用 URL 将更新发送到 Firebase 的方法。

我的代码如下：

// Each cell in my table has an ID; the code immediately below creates the unique ID for each date cell.

    var cell01id = snapshot.val().date + '-' + snapshot.val().initials + '-' + snapshot.val().age + '-date';
    // cell01id === 08/11/2015-BH-20-date

// after creating the ID, I then use innerHTML to display the data retrieved from firebase.  The syntax is taken from x-editable.
// notice [what goes here?] -- this is where I need to pass in a URL so x-editable can make edits.

    cell01.innerHTML = '<a href="#" id="' + cell01id + '" data-type="date" data-pk="1" data-url="' + [what goes here?] + '" data-title="Enter date">' + snapshot.val().date + '</a>';
    // cell01 === <a href="#08/11/2015-BH-20-date" data-type="date" data-pk="1" data-url="???????" data-title="Enter date">08/11/2015</a>

Answer 1

参加 HackReactor 并学习了大量关于 JS 和 RESTful API 的知识后，我能够找出我的问题。

这就是我所缺少的....首先，我重构了我的代码，以便逻辑发生在 makeEditable 函数中....我从 href 中删除了逻辑。

url 需要匹配我需要更新的数据对象 + 在 URL 的末尾追加 '.json'。其次，我必须确保我的类型与字段匹配（下面的示例是日期）。第三，我的 Ajax 回调中的 contentType 需要是 'application/json' 并且 dataType 需要是 'json'.

var makeEditable = function() {
  $('#' + cell01id).editable({
      url: 'https://fb-uniqueURL.firebaseio.com/entries/' + uniqueID + '.json',
      type: 'date',
      pk: uniqueID,
      title: 'Update Info:',
      ajaxOptions: {
        contentType: 'application/json',
        type: 'patch',
        dataType: 'json'
      },
      params: function(params) { 
        var obj = { "date": params.value };
        return JSON.stringify(obj)
      },
      success: function(response, newValue) {
        if (response.status == 'error') {
          return response.msg; //msg will be shown in editable form
        }
      }
  });

使用 Firebase API 通过 x-editable 内联编辑处理 PUT (PATCH) 请求

Use Firebase API to handle PUT (PATCH) requests via x-editable inline editing

javascript

jquery

firebase

x-editable