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 - Node.js - 在 Server.js 上执行 Node 命令(Express + React + Webpack)

javascript - 从选择中获取特定选项元素

javascript - 了解页面是否被 iframe 化

javascript - 组件是否只绑定(bind)到一个元素?

JavaScript 渲染逻辑 : Horizontal Dynamic Booking Calendar

javascript - 当我更新 HTML 时,Keydown 事件停止触发

javascript - 无法从 View 访问 Controller 内部的功能

php - AJAX登录无需重新加载页面

javascript - 测试 Jasmine 中自定义事件的处理