4

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

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() 。

4

3 回答 3

2

更新：这个答案很老了。访问子组件的正确方法是使用ractive.findComponent(name)orractive.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'

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

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

于 2013-11-27T21:57:28.860 回答
1

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

ractiveInstance.findComponent( name )
于 2016-11-17T10:53:20.843 回答
0

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

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')]);
};

对象“componentsHash”包含对所有已创建组件的引用。

用法：

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

然后您可以使用以下命令找到 Mike1 组件实例：

componentsHash['Mike1']
于 2016-06-09T08:38:29.720 回答