Realtime API - 如何呈现协作列表？

Question

我最近一直在尝试使用 Google 实时 API 制作一个网络应用程序。但是，在尝试实现协作列表时，我坚持做一些非常基本的事情。这是我找到的代码示例 (https://realtimeplayground.appspot.com/):

var app = {};

function onInitialize (model) {
  var collaborativeList = model.createList();
  collaborativeList.pushAll(['Cat', 'Dog', 'Sheep', 'Chicken']);
  model.getRoot().set('demo_list', collaborativeList);
}

function onFileLoaded (doc) {
  app.doc = doc;
  app.listDemo = doc.getModel().getRoot().get('demo_list');
  setup();
}

function setup () {
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_ADDED,
    onListChange);
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_REMOVED,
    onListChange);
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_SET,
    onListChange);
}

function onListChange (evt) {
  // Update the UI, etc.
}

我的问题是我不知道如何将这些列表元素绑定到 DOM 对象，甚至不知道如何呈现它们。到目前为止，我尝试过的任何事情似乎都没有用。有人可以告诉我如何将这些元素连接到 UI 吗？

Answer 1

Realtime API 处理多个用户编辑文件时数据传输、存储和冲突解决的所有方面。您可以使用“gapi.drive.realtime.databinding”将协作对象绑定到 UI 元素。

您可以通过以下调用启动实时 API：gapi.drive.realtime.load(fileId, onFileLoaded, opt_initializerFn, opt_errorFn);

'onFileLoaded' 可用于将任何用户界面元素连接到模型中的协作实体。

这里是 link 官方 Google 实时文档 API：https://developers.google.com/google-apps/realtime/reference/gapi.drive.realtime.databinding

Link 下面是实时 API 的示例项目：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/google-drive-realtime-api/google-drive-realtime-api.d.ts

Answer 2

您可以在一系列 div 元素中显示协作列表中的信息。假设您的 html 包含这样的 div：

<div class='animal-list'></div>

然后你可以像这样定义你的事件处理函数：

// add divs for the entries that are already in the list to begin with
function onFileLoaded (document) {
  // get the collaborative list
  var list = document.getModel().getRoot().get('demo_list');
  // get the div element containing the list
  var listElement = document.querySelector('.animal-list');
  // for each value in the list, create a div and insert into the list div
  for (var i = 0; i < list.length; i++) {
    // create the div element
    var newElement = document.createElement('div');
    // set the text to the animal name
    newElement.innerHTML = list.get(i);
    // append to the list div
    listElement.appendChild(newElement);
  }
  // call setup to add event handlers
  setup();
}

function setup () {
  // add different handler for each event type
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_ADDED,
    onValuesAdded);
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_REMOVED,
    onValuesRemoved);
  app.listDemo.addEventListener(
    gapi.drive.realtime.EventType.VALUES_SET,
    onValuesSet);
}

// when values are added, add a div for each to the list div
function onValuesAdded(event) {
    // get the div element containing the list
    var listElement = document.querySelector('.animal-list');
    // beforeChild is false if we the values are at the end of the list,
    // otherwise, it is the child div that the new values will be inserted before
    var beforeChild = false;
    if (event.index < event.target.length) {
        beforeChild = listElement.childNodes[event.index];
    }
    // for each inserted value, create a div and insert into the list div
    for (var i = 0; i < event.values.length; i++) {
        // create the div element
        var newElement = document.createElement('div');
        // set the text to the animal name
        newElement.innerHTML = event.values[i];
        if (beforeChild) {
            // insert into the list div at the correct place
            listElement.insertBefore(listElement.childNodes[event.index]);
        } else {
            // append to the list div
            listElement.appendChild(newElement);
        }
    }
}

// remove the divs from the ui corresponding to the entries removed from the list
function onValuesRemoved(event) {
    // get the div element containing the list
    var listElement = document.querySelector('.animal-list');
    // remove the divs
    for (var i = 0; i < event.values.length; i++) {
         listElement.removeChild(listElement.childNodes[event.index]);
    }
}

function onValuesSet (evt) {
    // get the div element containing the list
    var listElement = document.querySelector('.animal-list');
    // for each set value, set the text of the div to the new value
    for (var i = 0; i < event.newValues.length; i++) {
        // set the text to the animal name
        listElement.childNodes[event.index + i].innerHTML = event.newValues[i];
    }
}

Realtime API - 如何呈现协作列表？

Realtime API - how to render collaborative lists?

google-drive-realtime-api