Google Drive Realtime和Angular魔术

Question

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

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

Answer 1

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

• 如果您花时间为模型声明类型,它们可以很好地使用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"/>