I'm trying to use before advice to prevent execution of the original function. eg. I want to validate a form before submission and prevent submit from being executed if validation fails.

Would it make sense for before() to be able to e.stopPropagation or return false and prevent the original function from being executed?

this.submit = function() {
  // Don't execute.
}

this.validate = function() {
  return false;
}

this.on('submit', this.submit);
this.before('submit', this.validate);

Or should I just be triggering submit after validation?

this.validate = function() {
  this.trigger('validationSuccessful');
}

this.on('submit', this.validate);
this.on('validationSuccessful', this.submit);

The team at Travis CI told me that the combination of latest stable Karma, Node, and PhantomJS is causing the Travis problems. The latest unstable build of Karma is apparently working fine…but it's an unstable build.

So I'm think we just drop the tests running in Node 0.10 on Travis until the situation with these tools is resolved one way or the other. That will get the build passing.

Hi!
Don't you wanna concat flight into single file and make amd support additional rather than required (like jQuery)?

So that one who don't use amd could do like this

<script src="flight.js"></script>
<script>
Inbox = flight.defineComponent(function(Inbox){
  // ...
})
// ...
Inbox.attachTo(/* ... */)
</script>

Help to encourage and expose components that people write for Flight applications. Eventually these can be included on a project page / website.

Recommend that component names follow the flight-<name> pattern for easy discovery in the Bower registery.

Components

flight-orientation
A Flight component for device orientation

flight-storage
Store JSON data using multiple storage backends

flight-geolocation
Geolocation component

flight-battery
A Flight component for the HTML5 Battery API

flight-deck
A Flight component for a deck of cards with Fisher-Yates shuffling.

flight-conductor
A media timeline conductor inspired by popcorn.js

I seem to be missing something with the debug tool.

Firstly I tried, as per the docs, running DEBUG.events.logAll() on the command line, but DEBUG is undefined.

I then tried changing the default log level in tools.debug/debug.js, which seems to do nothing at all. On further investigation it seems that debug.enable() is never called, so of course it won't.

However, after calling debug.enable() from inside compose.js, no events continue to be logged.

DEBUG.events.logAll() can now be called from the command line, but also has no effect.

Lastly I tried importing debug in to a specific component, enabling it and then calling DEBUG.events.logAll(), the net result of which is that nothing happens.

Hello.
Please find some time to create small (but important) step-by-step tutorial for new users of the Flight.
How to "install", create initial tree of application, how to start build (write) application and so on.

I've written a mixin 'withMemDB', see https://gist.github.com/fscz/5071537

I would like to use the object 'memDB' that is added to the component
in other mixins on the mixin chain.

Let's say I define my component like this
defineComponent(terminalComponent, withMemDB, withTemplate, withMedia);

I would then like to use 'memDB' in 'withTemplate', by hooking onto the 'initialize' method
with this.after('initialize').

However this.memDB is not defined yet. I is however defined in my components
this.after('initialize').

This is unfortunate. I cannot add 'withMemDB' as a dependency
to all my other mixins either, because that would cause data loss.

Shouldn't mixins be mixed in in order, so that in my case 'withTemplate' and 'withMedia' can use, what 'withMemDB' added?

Taken this function:

this.on( document, 'resize', this.resize )

Then:

this.teardown() or this.off( document, 'resize', this.resize )

Will not just remove the instance's listener, but all of the component instance's listeners.

The easiest solution is to namespace the event type:

this.on( document, 'resize' + '.' + this.identity, this.resize )

and

this.off( document, 'resize' + '.' + this.identity, this.resize )

But it is also possible to add the namespace automatically when set.

For example:

/*! Flight v1.0.7 | (c) Twitter, Inc. | MIT License */

a la http://code.jquery.com/jquery-1.9.1.min.js

In the putting it together section, there's a mistake on the syntax:

defaultAttr({
        menuItemSelector: '.menu-item',
        selectedClass: 'selected'
});

should read

this.defaultAttrs({
        menuItemSelector: '.menu-item',
        selectedClass: 'selected'
});

Docs suggest

this.after('initialize', function() {
  this.$node
      .addClass(this.attr('buttonClass'))
      .text(this.attr('text'));
});

When in actual fact the example uses a different method and I can't get the above method to work

this.after('initialize', function() {
  this.$node
      .addClass(this.attr.buttonClass)
      .text(this.attr.text);
});

It might be a good idea to have a "created with flight" section so that people can see what others are doing with the framework.

For instance, I have recently created a Todo list application with Django + Flight and am more than happy for people to play around with it and look through the code. I am going to be adding documentation on how it works etc in the near future!

http://soarapp.herokuapp.com/

For request/response event pairs, it's currently possible for replies to be either synchronous or asynchronous. Consider the following snippet.

this.trigger('cakeRequested');
this.on('cakeServed', eatCake);

Assuming a component CakeMaker exists that listens for a 'cakeRequested' event and generates a 'cakeServed' event, the eatCake function would only be called if CakeMaker is asynchronous.

For the following example with the two calls flipped around (harder to read IMO), eatCake will now always be called. However depending on whether CakeMaker is asynchronous or not, cleanPlate could be called before or after eatCake.

this.on('cakeServed', eatCake);
this.trigger('cakeRequested');
cleanPlate();

I'd recommend always ensuring callbacks are asynchronous. Wait until the next tick before calling listeners after an event is triggered, much like how Q provides the same guarantee for promises. See https://github.com/kriskowal/q/blob/master/q.js#L85

A simple question I'm sure.

When looking through examples why do I sometimes see this.on(document, 'eventName', cb) and then without this.on('eventName', cb)?

For me it was working fine without, but when firing a trigger in an Ajax callback I had to use document as the first param to .on() get my events to work.

Couldn't work out why from docs.

Thanks for any help.

I'd like to establish a base component from which all components inherit. How would I best do this?

I guess I could mimic inheritance by creating a 'withBaseLogic' Mixin and for each component call that as first parameter in 'defineComponent' but that feels pretty cumbersome.

Hello!

About a year ago I was created some js-blocks system for one project. Main idea looks close to yours, but much more simple.

Look for it, please:
main js (blocks initing): https://github.com/norlin/thegood/blob/beta/nginx/www/js/block.js
block example: https://github.com/norlin/thegood/blob/beta/nginx/www/js/blocks/b-action.js
action example: https://github.com/norlin/thegood/blob/beta/nginx/www/js/actions/a-example.js

For create some block, all you need is:

<a href="#" class="js-pseudo-block" onclick="return {type:'action', action:'example', someParam:value1, param2: ...}">Make JS-action</a>

In the demo email client, clicking on the icons on the 'Move', 'Forward' and 'Reply' buttons causes the buttons to perform their action even if it's disabled.

Clicking the icon again to dismiss the submenu for 'Move' will then prevent the icon from triggering the button action for subsequent clicks of the icon. Dismissing the dialog for 'Reply' and 'Forward' does not cause the button to behave as expected.

If the button is enabled (by selecting an email for instance) and disabled (by unselecting the email), the icon is still enabled and performs the button action as described above.

Spotted on Chrome 25.0.1364.152 for Mac OS X 10.7.5.

I stumbled upon flight and it looked like a promising project, so I started writing a small test app to get used to it. Currently require.js and bower are used to manage dependencies and flight itself.
The problem I have is simple. There is a component and a mixin, but the mixin only works partially:

The component:

define(
    [
        'components/flight/lib/component',
        './Bar'
    ],
    function(defineComponent, withBar) {

        return defineComponent(FooComponent, withBar);

        function FooComponent() {

            this.defaultAttrs({
                test: 'DEFAULT!'
            });

            this.handleClick = function() {
                this.trigger('myevent');
            }

            this.handleTest = function() {
                console.log("handleTest");
            }

            this.after('initialize', function() {
                this.on('click', this.handleClick);
                this.on('myevent', this.handleTest);
            });

        }

    }
);

The mixin:

define(
    [],
    function() {

        function withBar() {

            this.after('initialize', function() { 

                this.before('myevent', function() {
                    console.log(this.attr.test);
                });

            });

        }

        return withBar;

    }
);

Debug logging is used and set to logAll. The expected output from the mixin is missing.

After testing I realized that the mixin works with this.on('myevent', ...) but not with before or after.

Is this a known bug or am I doing something wrong?

Does the flight mail app work in production, or is it just to demonstrate the features of Flight? It's unclear how to configure and deploy it.

Here is a problem I have with Flight.

I love the way it helps separating things into components, the fact that each of them are responsible for their own markup, the communication via events only, etc. In fact I have been doing this with my own classes for a while (via a MicroEvent mixin).

One thing that I can do with my method but can't find a way of doing with Flight is the following situation (in pseudo code). I'm sure you guys thought of a way to do this, but just can't find it in the documentation.

Facts:

• Define a Menu component:
  • all it does is trigger a "local" custom event menuItemClicked (along with some data) when an item is clicked.
  • when I say local event I mean this.trigger('menuItemClicked', aoData) so triggered from this.node
• Define a Block component
  • it only has a method changeColor(asColor) which takes a color and applies it as the block background color using this.$node.css('background-color', asColor)
  • this method will eventually be called when catching the custom event from the menu
• in our main we instantiate each components twice, something along the lines of:
  • Menu.attachTo('#menu1');
  • Menu.attachTo('#menu2');
  • Block.attachTo('#block1');
  • Block.attachTo('#block2');

Problem:

With flight we can setup a listener in Block that listens to the custom event triggered by the Menu component (menuItemClicked). Using event bubbling we can listen naturally to custom event originating from menu1 or menu2 at the document level but then any menu click would make both block1 and block2 update their background colors. Now what I want to do is to be able to have menu1 control block1 and menu2 control block2.

How would you do such a thing given that:

• We shouldn't mention anything related to the Menu component within the Block component
• We shouldn't have to pass information from the Menu component to the Block component (either using options, or through the DOM)

This is how I would do it using my own classes (without flight):

var menu1 = new Menu('#menu1');
var menu2 = new Menu('#menu2');
var block1 = new Block('#block1');
var block2 = new Block('#block2');

menu1.on('menuItemClicked', function(){ block1.changeColor('red'); });
menu2.on('menuItemClicked', function(){ block2.changeColor('blue'); });

Thanks in advance to enlighten me on this, I am sure it is possible!

Benoît.

I thought it could be good to move the sample app to a dedicated repository. As a standalone project, it could be worked on like an app and turned into a more complete example of some useful conventions, workflows, and tooling to use with Flight. Helpful for people getting started.

It might help identify components that we or others can open source, to encourage a collection of generic Flight components manageable with Bower, like Cameron's flight-storage.

The gh-pages branch for this repo would be specifically for the Flight project site and to store versioned builds.

Example of someone looking for an idiomatic Flight app: https://twitter.com/zootm/status/338900644645699584

While in debug mode, trigger attempts a window.postMessage with the data argument of the trigger call. If this data is a jQuery object, the call (sometimes, maybe always?) fails because the object is not serializable into JSON.

However, the jQuery trigger method can take jQuery objects as data, and if I disable debug mode it works in Flight as well.

The relevant line is here: https://github.com/twitter/flight/blob/master/lib/component.js#L70

I would have submitted a PR but I'm not sure the best way to handle this situation (maybe check if data instanceof jquery and don't throw an error if it is?).

We should point to the Flight-app generator as one way people can easily scaffold a Flight app and try it out.

1. Is it supports zepto instead of jquery?
2. Why in demo jquery included as script tag, but not as AMD module?

README.MD is referring to non existing object property defaultFunction. In component.js is defined as defaultBehaviour.

is the architecture designed for this ?

'init' is a lifecycle method we can hook into with 'before' and 'after'. Which are the others, if any?

For instance, Component.teardownAll() isn't a lifecycle method right? I.e: it still has to be called manually by client-side code. (Perhaps a separate issue to discuss if this is worthwhile to have)

Would be nice to have insight in this.

I have a mixin, that executes some code in a decorator and then calls this.render()

this.after('initialize', function() {
...
this.render();
}

The component has a decorater

this.after('render', function(ev,data) {
....
});

It's working, and the after-render decorator gets called, however in the mixin an error is thrown:
Uncaught TypeError: Object [object Object] has no method 'render'

Problem is, if I add the method in the mixin:

this.render = function(ev,data) {

}

The decorator in the component is never called.

I'm seeing this warning when I install Flight with Bower:
The version specified in the component.json of package flight mismatches the tag (1.0.6 vs 1.0.5)

Does something need updating?

As a somewhat newbie to JavaScript (but not programming), I find Flight interesting because it appears to address some issues about which I am experiencing teething pains in learning JavaScript. Mainly, I am using JavaScript + jQuery + jQuery UI plugin factory.

My first question is in regards to events. Is the Flight event mechanism supposed to be the sole way of doing events or are we expected to mix-and-match with existing event mechanisms? The reason why I ask, is because I use event delegation in jQuery regularly (e.g., $.on(, , )) and it doesn't look the the Flight event mechanism supports that directly.

My second question is in regards to tear down. One thing I like about jQuery UI plugin factory is that it automatically calls a component's destroy() method if the associated DOM element is deleted. It appears that Flight expects me to manually tear components down, is that accurate?

Thanks in advance.

https://github.com/twitter/flight#how-do-i-apply-mixins-to-a-regular-object

//mix withPositioning into withDialog
    compose.mixin(this, [withPositioning]);

    function withDialog() {
      //...
    }

    // return the mixin function
    return withDialog;

maybe we need it like this:

compose.mixin(withDialog.prototype, [withPositioning]);

I'm curious how exactly to interact with data. Right now you just have a js file with data in it, but most of the time you'd probably want some sort of local (browser) data stored somewhere in an ORM or something that you get on a payload and then on some long polling updates or similar.

Coming from MVC I can't seem to wrap my head around how in a real world app how the data and UI work together. My question would be, for example, if you click on an avatar of a user and it triggers a component to open a lightbox with user data, how do I get the data for that user? Normally, you'd get the user data from the model such as an ID to lookup more info (like posts by this user ID). But in this case, it seems like you need to sniff DOM data- attributes. I hope not, but is that correct?

I think this would be tremendously helpful in the docs.

Hi guys,

I ran into an interesting case where a blur event is never fired. In my current setup I have a component attached to a div node. The node contains an input element and my simplified implementation looks like this:

'use strict';

define(

  [
    'flight/component'
  ], 

  function (defineComponent) {

    return defineComponent(blurTest);

    function blurTest() {

      this.defaultAttrs({
        inputSelector: 'input'
      });

      this.blurCb = function () {
        console.log('this never fires...');
      }

      this.after('initialize', function () {
        this.on('blur', { 'inputSelector': this.blurCb });
      });
    }
  }
);

I think I understand why this doesn't work. When I looked at the component.on implementation I see https://github.com/twitter/flight/blob/master/lib/component.js#L113

 $element.on(type, callback);

which means that currently the events will be delegated to component selectors via component element. In case of blur this will actually never happen since I'm not expecting to blur away from the component's root element.

My current work around for this is to do:

this.$node.on('blur', 'input', this.bind(this.blurCb));

but I think it would be nice to just do:

this.on('blur', { 'inputSelector': this.blurCb });

as this works for other types of events.

Please let me know your thoughts on this. Perhaps there is a better way to approach it. Thanks.

As spotted by @tbrd, the test suite uses loadrunner whereas the demo app uses require.js.

I am looking for a way to attach a listener to an event now and in the future (reminiscent of $.live / $.delegate).
With just jQuery, I would have used $.on(event, selector, fn), but the optional selector seems not to have been ported to Flight's implementation of the 'on' method.

Am I missing something, is this something that could be added, or is there a better solution / workaround?

Following the installation instructions in the README.md I got a json parsing error. I am a complete newbie when it comes to Bower and Node, but the installation procedure seems simple enough...

I created the component.json file in a new directory, with the exact content in the example:

{
  "name": "myApp",
  "version": "1.2.1",
  "dependencies": {
    "flight": "~1.0.0"
  }
}

Running bower install gives me the following output:

E:\twitter_proj\myApp>bower install
bower cloning git://github.com/twitter/flight
bower cached git://github.com/twitter/flight
bower fetching flight
bower checking out flight#v1.0.0
bower copying C:\Documents and Settings\robin\Application Data\bower\cache\flight\1b2c3dda40d383a9303d7aa8a3f51636
bower cloning git://github.com/kriskowal/es5-shim.git
bower cached git://github.com/kriskowal/es5-shim.git
bower fetching es5-shim
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out es5-shim#v2.0.5
bower error Failed to parse json
Unexpected token p

There were errors, here's a summary of them:
- es5-shim Failed to parse json
Unexpected token p
An error was caught when reading the component.json:Failed to parse json
Unexpected token p

Looking at the es5-shim repository, it's component.json file seems to only contain the file name of package.json, causing (I'm guessing) the json parser to blow up with an unexpected token 'p'.

This was done on Windows XP (What?! Yes, I have my reasons :). I installed Node from http://nodejs.org/ (v 0.8.18) and then using npm installed Bower (v 0.7.0).

The mail control icons are always active even when the buttons are disabled.

It would be great to take the website to the next level, provide a nice intro to the project, surface related tools better, and move the detailed documentation there rather than cluttering up this repo's README.

$.browser has been removed in the newest version of jQuery, so Flight breaks completely at line 175 in component.js.

Update Flight docs to reference flight-jasmine.

https://github.com/twitter/flight-jasmine

This is awesome; @naoina has ported flight-jasmine to work with the Mocha test framework.

Many people prefer to use Mocha and an assertion library, so it would be great to make it clear that you can use Mocha with Flight.

https://github.com/naoina/flight-mocha

RequireJS has a more lightweight syntax that allows for less repetition:

This…

/* mySimpleComponent.js */

define(
  [
    'components/flight/lib/component'
  ],

  function(defineComponent)  {

    return defineComponent(mySimpleComponent);

    function mySimpleComponent() {
      this.doSomething = function() {
        //...
      }

      this.doSomethingElse = function() {
        //...
      }
    }
  }
);

Becomes…

/* mySimpleComponent.js */

define(function (require) {
  var defineComponent = require('components/flight/lib/component');

  return defineComponent(mySimpleComponent);

  function mySimpleComponent() {
    this.doSomething = function() {
      //...
    }

    this.doSomethingElse = function() {
      //...
    }
  }
});

Is it possible to add mixins to a component at runtime? if so how?

Hi, i'm quickly asking for advice while deepening the problem by myself. What is the meaning of the following lines inside component.js (lines 90ties) ? They are failing for me because this.attr is not defined

if (typeof this.attr.eventData === 'object') {
    data = $.extend(true, {}, this.attr.eventData, data);
}

Everything is triggered by this method defined in my component:

    this.success = function(data){
        this.trigger('success', data);
    }.bind(this);

the method is set as success handler for a jQuery post request.

what should this.attr hold in that context?

flight 1.0.3 ... i'm going to update

On firefox i'm not able to trigger events using this.trigger, i must use this.$node.trigger as a workaround, which works quite good, nonetheless this behavior is suprising. I'm wiring a quick reminder here, i will add more details as soon as possible

reference url: https://gist.github.com/nanha/4754182

thanks.

The example of email does not work in Microsoft Internet Explorer 9 requires some additional accioan to work?

It would be cool, if mixins didn't override an objects methods, but a call to the respective method would invoke all known methods of the given name in supplied order.

Let's say, I have a component 'gateway' with a method 'connect'. Now I would like to add mixins for additional functionality. Maybe a mixin 'withDatabase' and another 'withRailsApplication'. The order, these methods are called, would depend on the call to 'defineComponent' of the 'gateway' component.

Let's say, I call it like this
defineComponent(gateway, withDatabase, withRailsApplication)

then this should produce a call stack, like this

withDatabase.connect
withRailsApplication.connect
gateway.connect

Thus the actual component should always be at the bottom of this call stack.

I notice that in most of the flight components 'use strict' is declared outside the define call. Wouldn't this potentially effect users' code if they use something like r.js to bundle everything into one file?

Any reason 'use strict' is not placed inside the define callback?

What's a good way to see which events are attached to a DOM node? (thanks!)