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

以下是我要做的事情：作为用户，当在树上进行选择时（因此功能＆＃34;选择＆＃34;被调用），我喜欢我的TreeUser观察事件并做一些治疗。事实是我无法得到Tree的活动。

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

我简化了我的例子。除了事件观察之外，请考虑一切正常。

修改：当我说：＆＃34;它不起作用＆＃34;，我的意思是我得到一个javascript错误： panel.components.Tree.observe is undefined

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

Answer 1

您必须找到已创建的组件的tree实例，并在其上调用observe。（顺便说一句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自定义组件？

1 个答案: