javascript - 使用 Twitter Flight 将组件附加到动态创建的元素

Question

一直在寻找如何通过 Twitter Flight 附加到动态创建的元素。

具有以下 HTML

<article>Add element</article>

以及下面的组件定义

var Article = flight.component(function () {
    this.addElement = function () {
        this.$node.parent().append('<article>Add element</article>');
    };

    this.after('initialize', function () {
        this.on('click', this.addElement);
    });
});
Article.attachTo('article');

创建新元素后，不会触发点击事件。这是 fiddle :http://jsfiddle.net/smxx5/

Answer 1

恕我直言，这不是您应该使用 Flight 的方式。

每个组件都应该与应用程序的其余部分隔离，因此您应该避免这种情况。$node.parent()

另一方面，您可以与后代互动。

我的建议是创建一个使用事件委托(delegate)的“文章管理器”组件。例如。

http://jsfiddle.net/kd75v/

<div class="js-articles">
    <article class="js-article-add">Add element</article>
<div/>

和

var ArticlesManager = flight.component(function () {

    this.defaultAttrs({
        addSelector: '.js-article-add',
        articleTpl: '<article class="js-article-add">Add element</article>'
    });

    this.addArticle = function () {
        this.$node.append(this.attr.articleTpl);
    };

    this.after('initialize', function () {
        this.on('click', {
            addSelector: this.addArticle
        });
    });
});

ArticlesManager.attachTo('.js-articles');