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

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

Answer 1

这不是你应该如何使用Flight imho。

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

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

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

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

Answer 2

尝试将Article附加到添加的每篇新文章中：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/smxx5/2/

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

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

Article.attachTo('article');

最后Article.attachTo('article');在加载时运行一次，只会附加到现有的article元素。

Answer 3

我遇到了这个问题，并且解决了以下问题......

Javascript：为简洁而全部拼凑在一起，但很容易分开。

(function(){
    var TestComponent, LoaderComponent;

    TestComponent = flight.component(function() {
        this.doSomething = function()
        {
            console.log('hi there...');
        };

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

    LoaderComponent = flight.component(function() {
        this.attachComponents = function()
        {
            TestComponent.attachTo('.test');
        };

        this.after('initialize', function() {
            // Initalise existing components
            this.attachComponents();

            // New item created, so re-attach components
            this.on('newItem:testComponent', this.attachComponents);
        });        
    });

    LoaderComponent.attachTo('body');
}());

HTML ：请注意，存在一个.test节点。这将由Flight在初始化时获取（即不动态）。然后，我们使用jQuery添加第二个.test节点，并触发LoaderComponent正在侦听的事件。

<div class="test">
    <p>Some sample text.</p>
</div>

<script>
$('body').append('<div class="test"><p>Some other text</p></div>').trigger('newItem:testComponent');
</script>

这显然是一个非常人为的例子，但应该表明可以将Flight与动态创建的元素一起使用。

希望有所帮助：）

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

3 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/smxx5/2/