实时API -如何呈现协作列表？

Question

我最近一直在尝试使用制作一个web应用程序。然而，当我试图实现协作列表时，我仍然停留在一些非常基本的事情上。下面是我找到的一个代码示例(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.
}

​

我的问题是，我不知道如何将这些list元素绑定到DOM对象，甚至不知道如何呈现它们。到目前为止，我尝试过的一切似乎都不起作用。有人能告诉我如何将这些元素连接到UI吗？

Answer 1

您可以在一系列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];
    }
}

Answer 2

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

您可以使用以下调用启动实时API : gapi.drive.realtime.load(fileId、onFileLoaded、opt_initializerFn、opt_errorFn)；

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

以下是实时API的谷歌官方文档链接：https://developers.google.com/google-apps/realtime/reference/gapi.drive.realtime.databinding

下面的链接是Realtime的一个示例项目：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/google-drive-realtime-api/google-drive-realtime-api.d.ts