如何收听RactiveJS自定义组件？

Question

我有一个使用Ractive定制组件的HTML文件（我们称它为TreeUser.html ）（在我的示例中，我们称其为Tree）。 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

这是我想做的事情：作为用户，当在树上完成选择（因此调用了“选择”功能）时，我希望TreeUser观察事件并进行一些处理。 事实是我无法获得树的事件。

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

我简化了我的例子。 考虑除此事件观察之外的所有方法。

编辑 ：当我说：“它不起作用”时，我的意思是我收到了一个JavaScript错误： panel.components.Tree.observe is undefined

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

Answer 1

您必须找到已创建的组件的tree实例，然后对其进行调用。 （btw 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!
    })
},