twitter-flight - twitter flightjs 可以在组件内做组件吗

Question

在 Facebook react.js 中，您可以在组件内组合组件，也可以混合搭配。

我想知道推特航班是否可以做同样的事情。如果是这样，谁能给我一个例子？

这就是我到目前为止所拥有的：

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();

    });

};

});

我的 info_input.js 定义如下：

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');
    };

};

});

Answer 1

这就是mixin的用途。Flight Components 是丰富的 mixin。

来自 doc/component_api.md

它带有一组基本功能，例如事件处理和组件注册。每个组件定义都混合了一组描述其行为的自定义属性。

阅读有关组件的更多信息。

所以你的问题的答案是肯定的。我猜你正在做的事情是合法的，虽然我以前从未做过。

我宁愿将共享逻辑移动到 Mixin 或将两个组件附加到同一个元素并让它们通过事件进行对话：

组件/input_section.js

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

组件/info_input.js

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

Answer 2

GG上面提到的解决方案有效！我们可能会提前一步触发受限范围的事件而不是文档：

组件/input_section.js

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

组件/info_input.js

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