4

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

有人愿意开导我吗?我猜有一种很好的方法可以让内存中的数据模型自动神奇地连接到 ui 并与其他编辑和实际驱动器文件同步。我接近了吗?

4

1 回答 1

8

Magical 可能言过其实,但我认为它们可以很好地协同工作的原因有几个。

  • 如果你花时间为你的模型声明类型,它们可以很好地与 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"/>
于 2013-03-29T00:01:36.470 回答