sync_machine.html

<!DOCTYPE html>

<html>
<head>
  <title>sync_machine.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="chaplin.html">
                chaplin.coffee
              </a>
            
              
              <a class="source" href="application.html">
                application.coffee
              </a>
            
              
              <a class="source" href="composer.html">
                composer.coffee
              </a>
            
              
              <a class="source" href="controller.html">
                controller.coffee
              </a>
            
              
              <a class="source" href="dispatcher.html">
                dispatcher.coffee
              </a>
            
              
              <a class="source" href="composition.html">
                composition.coffee
              </a>
            
              
              <a class="source" href="event_broker.html">
                event_broker.coffee
              </a>
            
              
              <a class="source" href="history.html">
                history.coffee
              </a>
            
              
              <a class="source" href="route.html">
                route.coffee
              </a>
            
              
              <a class="source" href="router.html">
                router.coffee
              </a>
            
              
              <a class="source" href="support.html">
                support.coffee
              </a>
            
              
              <a class="source" href="sync_machine.html">
                sync_machine.coffee
              </a>
            
              
              <a class="source" href="utils.html">
                utils.coffee
              </a>
            
              
              <a class="source" href="mediator.html">
                mediator.coffee
              </a>
            
              
              <a class="source" href="collection.html">
                collection.coffee
              </a>
            
              
              <a class="source" href="model.html">
                model.coffee
              </a>
            
              
              <a class="source" href="collection_view.html">
                collection_view.coffee
              </a>
            
              
              <a class="source" href="layout.html">
                layout.coffee
              </a>
            
              
              <a class="source" href="view.html">
                view.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>sync_machine.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre><span class="string">'use strict'</span></pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Simple finite state machine for synchronization of models/collections
Three states: unsynced, syncing and synced
Several transitions between them
Fires Backbone events on every transition
(unsynced, syncing, synced; syncStateChange)
Provides shortcut methods to call handlers when a given state is reached
(named after the events above)</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>UNSYNCED = <span class="string">'unsynced'</span>
SYNCING  = <span class="string">'syncing'</span>
SYNCED   = <span class="string">'synced'</span>

STATE_CHANGE = <span class="string">'syncStateChange'</span>

SyncMachine =
  <span class="attribute">_syncState</span>: UNSYNCED
  <span class="attribute">_previousSyncState</span>: <span class="literal">null</span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <h2 id="get-the-current-state">Get the current state</h2>

            </div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="attribute">syncState</span>:<span class="function"> -&gt;</span>
    <span class="property">@_syncState</span>

  <span class="attribute">isUnsynced</span>:<span class="function"> -&gt;</span>
    <span class="property">@_syncState</span> <span class="keyword">is</span> UNSYNCED

  <span class="attribute">isSynced</span>:<span class="function"> -&gt;</span>
    <span class="property">@_syncState</span> <span class="keyword">is</span> SYNCED

  <span class="attribute">isSyncing</span>:<span class="function"> -&gt;</span>
    <span class="property">@_syncState</span> <span class="keyword">is</span> SYNCING</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <h2 id="transitions">Transitions</h2>

            </div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="attribute">unsync</span>:<span class="function"> -&gt;</span>
    <span class="keyword">if</span> <span class="property">@_syncState</span> <span class="keyword">in</span> [SYNCING, SYNCED]
      <span class="property">@_previousSync</span> = <span class="property">@_syncState</span>
      <span class="property">@_syncState</span> = UNSYNCED
      <span class="property">@trigger</span> <span class="property">@_syncState</span>, <span class="keyword">this</span>, <span class="property">@_syncState</span>
      <span class="property">@trigger</span> STATE_CHANGE, <span class="keyword">this</span>, <span class="property">@_syncState</span></pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>when UNSYNCED do nothing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="keyword">return</span>

  <span class="attribute">beginSync</span>:<span class="function"> -&gt;</span>
    <span class="keyword">if</span> <span class="property">@_syncState</span> <span class="keyword">in</span> [UNSYNCED, SYNCED]
      <span class="property">@_previousSync</span> = <span class="property">@_syncState</span>
      <span class="property">@_syncState</span> = SYNCING
      <span class="property">@trigger</span> <span class="property">@_syncState</span>, <span class="keyword">this</span>, <span class="property">@_syncState</span>
      <span class="property">@trigger</span> STATE_CHANGE, <span class="keyword">this</span>, <span class="property">@_syncState</span></pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>when SYNCING do nothing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="keyword">return</span>

  <span class="attribute">finishSync</span>:<span class="function"> -&gt;</span>
    <span class="keyword">if</span> <span class="property">@_syncState</span> <span class="keyword">is</span> SYNCING
      <span class="property">@_previousSync</span> = <span class="property">@_syncState</span>
      <span class="property">@_syncState</span> = SYNCED
      <span class="property">@trigger</span> <span class="property">@_syncState</span>, <span class="keyword">this</span>, <span class="property">@_syncState</span>
      <span class="property">@trigger</span> STATE_CHANGE, <span class="keyword">this</span>, <span class="property">@_syncState</span></pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>when SYNCED, UNSYNCED do nothing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="keyword">return</span>

  <span class="attribute">abortSync</span>:<span class="function"> -&gt;</span>
    <span class="keyword">if</span> <span class="property">@_syncState</span> <span class="keyword">is</span> SYNCING
      <span class="property">@_syncState</span> = <span class="property">@_previousSync</span>
      <span class="property">@_previousSync</span> = <span class="property">@_syncState</span>
      <span class="property">@trigger</span> <span class="property">@_syncState</span>, <span class="keyword">this</span>, <span class="property">@_syncState</span>
      <span class="property">@trigger</span> STATE_CHANGE, <span class="keyword">this</span>, <span class="property">@_syncState</span></pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>when UNSYNCED, SYNCED do nothing</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="keyword">return</span></pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <h2 id="create-shortcut-methods-to-bind-a-handler-to-a-state-change">Create shortcut methods to bind a handler to a state change</h2>

            </div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre><span class="keyword">for</span> event <span class="keyword">in</span> [UNSYNCED, SYNCING, SYNCED, STATE_CHANGE]
  <span class="keyword">do</span> <span class="function"><span class="params">(event)</span> -&gt;</span>
    SyncMachine[event] = <span class="function"><span class="params">(callback, context = <span class="keyword">this</span>)</span> -&gt;</span>
      <span class="property">@on</span> event, callback, context
      callback.call(context) <span class="keyword">if</span> <span class="property">@_syncState</span> <span class="keyword">is</span> event</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>You’re frozen when your heart’s not open.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>Object.freeze? SyncMachine</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>Return our creation.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>module.<span class="built_in">exports</span> = SyncMachine</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>