Google Drive Realtime和Angular魔术

时间:2013-03-28 15:26:06

标签: google-drive-api

我正在观看由Steve Bazyl在http://www.youtube.com/watch?v=HCyrywLtWIs&feature=g-user-u关于驱动器实时api的介绍的youtube视频。他提到使用实时和角度框架就像魔术一样。我已经开始研究它会是什么样子但是没有看到魔法。我很清楚,我可能不是任何一个大师,而且我错过了一些小块。

有人愿意开导我吗?我猜测有一种非常好的方式,它使内存数据模型自动神奇地连接到ui并与其他编辑和实际驱动文件同步。我接近了吗?

1 个答案:

答案 0 :(得分:8)

神奇可能是一种夸大其词,但这里有一些我认为它们可以很好地协同工作的原因。

  • 如果您花时间为模型声明类型,它们可以很好地使用angular的数据绑定,属性可以与ng-model一起使用。

  • 更重要的是,由于Angular的工作方式,处理远程事件是轻而易举的。您真正需要的只是一个事件监听器:

    doc.getModel().getRoot().addEventListener(
      gapi.drive.realtime.EventType.OBJECT_CHANGED, 
      function(event) {
        if (!event.isLocal) {
          $rootScope.$digest();
        }
      });
    

    您需要做的就是确保您的UI更新以适应远程事件:)

一些例外:

  • 协作字符串很特别。如果你不关心光标位置,你可以做一个简单的猴子补丁,将文本公开为与ng-model一起使用的标准属性。

    Object.defineProperty(gapi.drive.realtime.CollaborativeString.prototype, 'text', {
      set:function (value) {
        return this.setText(value);
      },
      get:function () {
        return this.getText();
      }
    });
    

然后,您可以绑定到协作字符串,如:

    <input type="text" data-ng-model="myCollaborativeString.text"/>

为了正确定位光标,编写可重用的指令并不难。我将在接下来的几周内在github上开始一组有用的指令,因此创建一个完全协作的文本字段就像添加一个属性一样简单:

    <textarea data-rt-collaborative data-ng-model="myCollaborativeString"/>