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

标签 javascript jquery twitter-flight

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

最佳答案

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

每个组件都应该与应用程序的其余部分隔离,因此您应该避免使用 this.$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');

关于javascript - 使用 Twitter Flight 将组件附加到动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23782056/

相关文章:

javascript - 如何获取下拉值变化的下拉数据?

javascript - 获取飞行组件事件的委托(delegate)目标

javascript - 选择导航到 URL 上的单选按钮

javascript - 如何自定义 jQuery 密码强度指示器位置

javascript - 关于 JavaScript 原型(prototype)

javascript - 检查 JSON 对象是否为空

javascript - 在组件内本地公开函数变量

javascript - Safari 出现文本输入问题,用户输入文本时选择文本,导致文本丢失

javascript - 从 ng-option 获取值

javascript - 将全局 javascript 数组值传递到 HTML 标记中