FlightJS and RiotJS notes

flightjs-and-riotjs-notes.md

Flightjs and riotjs comparison/exploration

Flightjs templating

{{#mailItems}}
  <tr id="{{id}}" class="mail-item">
  {{#important}}
    <td class="span1"><span class="label label-important">Important</span></td>
  {{/important}}
  {{^important}}
    <td class="span1"><span>&nbsp;</span></td>
  {{/important}}
    <td class="span2 mailContact">{{name}}</td>
    <td class="span8">
      <span class="mailSubject">
        {{formattedSubject}}
      </span>
      <span class="mailMessage">
        - <a href="#">{{formattedMessage}}</a>
      </span>
    </td>
  </tr>
{{/mailItems}}

riotjs templating

<!-- invoice entry -->
<script type="text/tmpl" id="invoice-tmpl">
  <li>{time} <strong>${total}</strong></li>
</script>

<!-- customer page -->
<script type="text/tmpl" id="customer-tmpl">
  <img src="{img}">

  <div class="details">
    <h1>{name}</h1>

    <p class="meta">
      {email} <span>&bull;</span>
      {joined}
    </p>

    <p class="desc">{desc}</p>

  </div>

  <div id="user-list">
    <h3>Users</h3>
  </div>

  <div id="invoice-list">
    <h3>Invoices</h3>
    <ul></ul>
  </div>

</script>

riot eventing

on, one, off, trigger app.on('nextPageRequested', function(pageIx) { ... }) this.trigger('nextPageRequested');

flight eventing

Provides before and after for interception/AOP, which is nice. on, off, trigger

flight objects

Everything is a mixin of component, which provides eventing methods and more. When defining a new component, you can mix in other traits, e.g. define(timeline, withTweetCapability, withScrollCapability);.

define([
    'flight/lib/component',
    'bower_components/mustache/mustache',
    'app/data',
    'app/templates'],

  function(defineComponent, Mustache, dataStore, templates) {
    return defineComponent(moveTo);

    function moveTo() {

      this.defaultAttrs({
        dataStore: dataStore
      });

      this.serveAvailableFolders = function(ev, data) {
        this.trigger("dataMoveToItemsServed", {
          markup: this.renderFolderSelector(this.getOtherFolders(data.folder))
        })
      };

      this.renderFolderSelector = function(items) {
        return Mustache.render(templates.moveToSelector, {moveToItems: items});
      };

      this.moveItems = function(ev, data) {
        var itemsToMoveIds = data.itemIds
        this.attr.dataStore.mail.forEach(function(item) {
          if (itemsToMoveIds.indexOf(item.id) > -1) {
            item.folders = [data.toFolder];
          }
        });
        this.trigger('dataMailItemsRefreshRequested', {folder: data.fromFolder});
      };

      this.after("initialize", function() {
        this.on("uiAvailableFoldersRequested", this.serveAvailableFolders);
        this.on("uiMoveItemsRequested", this.moveItems);
      });
    }

  }
);