title: Realtime API - how to render collaborative lists?
body: <p>I've been trying recently to make a web app using Google Realtime API. However, I'm stuck on pretty basic things, while trying to implement collaborative lists. Here's a code example I've found (<a href="https://realtimeplayground.appspot.com/" rel="nofollow">https://realtimeplayground.appspot.com/</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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.
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is that I don't know how to bind those list elements to the DOM objects or even render them. Nothing I've tried so far seems to work. Can somebody tell me please how to connect those elements to the UI?</p>