API реального времени - как отображать совместные списки?

Question

Я недавно пытался создать веб-приложение с использованием API Google Realtime. Тем не менее, я застрял в довольно простых вещах, пытаясь реализовать совместные списки. Вот пример кода, я нашел (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-или даже сделать их. Ничего, что я пробовал до сих пор, похоже, не работает. Может ли кто-нибудь сказать мне, как подключить эти элементы к пользовательскому интерфейсу?

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

API реального времени обрабатывает все аспекты передачи данных, хранения и разрешения конфликтов, когда несколько пользователей редактируют файл. Вы можете использовать 'gapi.drive.realtime.databinding' для связывания совместных объектов с элементами пользовательского интерфейса.

Вы можете запустить API реального времени с помощью этого вызова: gapi.drive.realtime.load (fileId, onFileLoaded, opt_initializerFn, opt_errorFn);

'onFileLoaded' может использоваться для подключения любых элементов пользовательского интерфейса к объектам совместной работы в модели.

Вот ссылка на официальный Google Документация для Realtime API: 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