Google Drive Realtime和Angular魔术 [英] Google Drive Realtime and Angular magic

问题描述

我在 http：// www中观看youtube视频.youtube.com / watch？v = HCyrywLtWIs& feature = g-user-u 关于驱动器实时api的介绍。他提到与实时和角度框架一起工作就像魔术一样。我已经开始研究它会是什么样子，但我没有看到魔法。我清楚地知道，这可能是我不是一个大师，并且错过了一些小小的部分。

有人会照顾我吗？我猜测，有一种非常好的方式，它可以使内存数据模型自动连接到ui，并与其他编辑和实际驱动器文件同步。我是否接近？

解决方案

魔术可能是夸大其词，但这里有几个原因，我认为他们在一起工作的很好。 / p>

• 如果您花时间为您的模型声明类型，那么使用angular的数据绑定就可以很好地工作，并且可以使用属性ng-model。
  

• 更重要的是，由于Angular的工作方式，处理远程事件变得轻而易举。所有你真正需要的是一个单一的事件监听器：
  
  

    doc.getModel（）。getRoot（）。addEventListener（
   gapi.drive.realtime.EventType.OBJECT_CHANGED，
  函数（事件）{
   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 =textdata-ng-model =myCollaborativeString.text/> 
    

  为了正确的游标定位，编写可重用的指令并不难。我将在接下来的几周内在github上启动一些有用的指令集，这样创建一个完全协作的文本字段就像添加一个属性一样简单：

   < textarea data-rt-collaboration data-ng-model =myCollaborativeString/> 
    

  
  

  I was watching the youtube video at http://www.youtube.com/watch?v=HCyrywLtWIs&feature=g-user-u by Steve Bazyl about the introduction of the drive realtime api. He mentioned that working with the realtime and the angular framework is like magic. I've started looking into what it would be like but am not seeing the magic. I am well aware that it is probably me not being a guru on either and am missing some small piece.

  Would anyone care to enlighten me? I'm guessing that there is a very nice way that it keeps the in memory data model auto-magically connected to the ui and synced with others editing and the actual drive file. Am I close?

  解决方案

  Magical may have been an overstatement, but here's a few reasons why I think they work well together.

  • If you take the time to declare types for your model, they work just fine with angular's data binding and properties can be used with ng-model.

  • More importantly, handling remote events is a breeze thanks to the way Angular works. All you really need is a single event listener:

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

    That's all you need to do to ensure your UI updates appropriately in response to remote events :)

  A few exceptions:

  • Collaborative strings are special. If you don't care about cursor position, you can do a simple monkey patch to expose the text as a standard property that works with ng-model.

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

  You can then bind to a collaborative string like:

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

  For proper cursor positioning, its not that hard to write a reusable directive to do that. I'll start a collection of useful directives and such on github in the next few weeks so creating a fully collaborative text field is as simple as adding an attribute:

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

  这篇关于Google Drive Realtime和Angular魔术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！