2

一直在寻找如何使用 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');

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

4

3 回答 3

3

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

每个组件都应该与应用程序的其余部分隔离，因此您应该避免 this.$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');
于 2014-05-22T05:37:42.930 回答
1

Try attaching Article to each new article added:

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

The Article.attachTo('article'); at the end, that runs once on load, will only attach to existing article elements.

于 2014-05-21T11:46:11.337 回答
0

我遇到了这个问题，解决方法如下......

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 与动态创建的元素一起使用。

希望有帮助:)

于 2014-07-08T21:42:41.917 回答