如何收听 RactiveJS 自定义组件？

Question

我有一个 HTML 文件（我们称之为 TreeUser.html），使用 Ractive 自定义 component（在我的示例中我们称之为树）。此树由 TreeUser 使用如下：

Tree.js

...
var Tree = Ractive.extend({ 
    template : Tree.html,

    onrender : function() {
        select : function(event) {
            this.set("selected", event.context);
            this.fire("selected", event.context)
        }
    })
});

return Tree;

})

TreeUser.html

<Tree>
    ....
</Tree>

TreeUser.js

var TreeUser = Ractive.extend({
    ...

    components : {
        Tree : Tree
    },

    onrender : function() {
        // Here, I'd like to observe to Tree's fire. This does not work:
        this.components.Tree.prototype.observe("selected", function(item){
            // Do something
        })
    },  

return TreeUser

这是我想做的事情：作为用户，当在树上完成选择时（因此函数 "select" 被调用），我希望我的 TreeUser 观察事件并做一些治疗。事实是我无法获取树的事件。

更一般地说，我希望能够观察使用过的组件触发的事件。 Ractive 有可能吗？如果没有，是否有任何解决方法？

我简化了示例。考虑一切正常，除了这个事件观察。

编辑：当我说："it does not work"，我的意思是我得到一个 javascript 错误： panel.components.Tree.observe is undefined

但是在我的调试器的控制台中，panel.components.Tree.prototype.observe打印函数的代码。

Answer 1

您必须找到已创建的组件的 tree 实例并对其调用观察。（顺便说一句 onrender 有效，但 IMO 使用 oninit 更有意义）

onrender : function() {
    // use whatever tag alias you declared to "find" the component 
    this.findComponent('Tree').observe("selected", function(item){
        // Do something
    })
},

但是，你真的不需要观察者！父级可以使用相同的标签别名作为事件前缀直接订阅组件事件：

oninit: function() {
    this.on('Tree.selected', function(item){
        // will fire when component fires selected event!
    })
},

如何收听 RactiveJS 自定义组件？

How can I listen to a RactiveJS custom component?

javascript

events

ractivejs