Question

我发现自己处于一种情况，我想访问从父Ractive的Ractive组件创建的实例。 E.g。

var myComponent = Ractive.extend(
    {
        uselessFunction: function()
        {
            alert('Hello ' + this.data.who);
        }
    }
);

var myRactive = new Ractive(
    {
        el: 'body',
        components:
        {
            mycomponent: myComponent
        },
        template: '{{#people}}<rv-mycomponent who="{{.}}"/>{{/people}}',
        data:
        {
            people:
            [
                'Mike',
                'Charly',
                'April'
            ]
        }
    }
);

运行我将获得3个myComponent实例。现在我想要的是在myRactive的方法中调用任何组件实例上的uselessFunction（或者在所有实例上更好）。

当然有许多可能的解决方法（比如在组件中使用观察者然后更改一些共享属性）来实现这一点，但我希望有一些内置的接口。唉，就像我筛选myRactive对象一样，我似乎无法找到对组件实例的引用。虽然我怀疑有一个，但看到myComponent的teardown（）也会在每个组件上调用teardown（）。

Answer 1

更新：这个答案很老了。访问子组件的正确方法是使用ractive.findComponent(name)或ractive.findAllComponents(name)

没有良好的方法可以做到这一点，但有可能：

people = [];

Ractive.components.person = Ractive.extend({
  init: function () {
    people.push( this );
  },
  uselessFunction: function () {
    alert( 'Hello ' + this.get('who') );
  }
};

ractive = new Ractive({
  el: 'body',
  template: '{{#people}}<person who="{{.}}"/>{{/people}}',
  data: { people: [ 'Mike', 'Charly', 'April' ] }
};

// later...
people[0].uselessFunction(); // alerts 'Hello Mike'

（nb此代码不适用于当前版本，它假设您使用0.3.8，它会丢弃rv-并允许您在Ractive.components上全局注册组件。）

正如我所说，它相当不优雅。一直试图找出解决这个问题的最佳方法。我正在调查的一种方法是允许ractive.find()和ractive.findAll() - 与ractive.el.querySelector() / ractive.el.querySelectorAll()相似 - 来查找组件（例如ractive.findAll('people')）as以及DOM节点。在此期间可以接受任何建议！

Answer 2

看起来.findComponent()现在已经完成了：

ractiveInstance.findComponent( name )

Answer 3

以下是我使用的类似解决方案：

Ractive.defaults.isolated=true;
componentsHash = {};  // GLOBAL
Ractive.defaults.oninit=function(){
    if (this.get('ref'))
        componentsHash[this.get('ref')]=this;
};
Ractive.defaults.onteardown=function(){
    if (this.get('ref') && componentsHash[this.get('ref')])
        delete(componentsHash[this.get('ref')]);
};

对象＆＃34; componentsHash＆＃34;包含对所有已创建组件的引用。

用法：

<some-component ref="Mike1"/>
<some-component ref="Mike2"/>

然后您可以使用：

找到Mike1组件实例

componentsHash['Mike1']

从父级访问Ractive组件

3 个答案: