Can twitter flightjs do component within component

Question

In Facebook react.js, you can compose component within component, or maybe mix and match.

I'm wondering if twitter flight can do the same thing. if so, can anyone gives me an example?

this is what I have so far:

define(function (require) {

var defineComponent = require('flight/lib/component'),
    infoInput = require('component/info_input');

return defineComponent(inputSection, infoInput);

function inputSection () {

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

        infoInput.doSomehting();

    });

};

});

and my info_input.js is defined below:

define(function (require) {

var defineComponent = require('flight/lib/component');
return defineComponent(infoInput);
function infoInput() {

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


    });

    this.doSomething = function() {
        alert('I will do something');
    };

};

});

score 1 · Accepted Answer · answered Dec 02 '14 at 09:35

This is what mixins are for. Flight Components are enriched mixins.

From doc/component_api.md

It comes with a set of basic functionality such as event handling and Component registration. Each Component definition mixes in a set of custom properties which describe its behavior.

Read more about Components.

So the answer to your question is Yes. I guess that what you are doing is legit, although I've never done it before.

I'd rather move the shared logic to a Mixin or attach the two components to the same element and let them talk via events:

component/input_section.js

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

component/info_input.js

this.after('initialize', function () {
   this.on('uiSomethingRequired', this.doSomething);
});

I forgot to mention that if you do so, you'd need to attach info_input first otherwise input_section will fire the event too early :) — G.G., Dec 02 '14 at 09:44
thanks for sharing. I do understand mixins, perhaps my concept is not strong enough. I suppose there are more hands-on practice for me to do. thank you! — Jim, Dec 03 '14 at 07:24

score 0 · Answer 2 · answered Apr 09 '19 at 15:09

Solution mentioned by G.G above works! We may go a step ahead to trigger events on restricted scope instead of document:

component/input_section.js

this.after('initialize', function () {
 this.$node.closest(this.attr.parentClass).trigger('uiSomethingRequired');
});

component/info_input.js

this.after('initialize', function () {
  this.on(this.$node.closest(this.attr.parentClass), 'uiSomethingRequired', this.doSomething);
});

Can twitter flightjs do component within component

2 Answers2