Question

我最近一直在尝试使用Google Realtime API制作网络应用。但是，在尝试实施协作列表时，我仍然坚持非常基本的东西。这是我找到的代码示例（https://realtimeplayground.appspot.com/）：

＆＃13;

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.
}

＆＃13;

我的问题是我不知道如何将这些列表元素绑定到DOM对象甚至渲染它们。到目前为止，我所做的一切似乎都没有效果。有人可以告诉我如何将这些元素连接到UI吗？

Answer 1

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

您可以通过以下调用启动Realtime API： gapi.drive.realtime.load（fileId，onFileLoaded，opt_initializerFn，opt_errorFn）;

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

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

以下链接是Realtime 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];
    }
}

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

2 个答案: