ractivejs - 从父组件访问 Ractive 组件

Question

我发现自己处于一种情况，我想从父 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 的某种方法(或者在所有实例上更好)。

当然有许多可能的解决方法(比如在组件中使用观察者，然后更改一些共享属性)来实现这一点，但我希望有一些内置的接口(interface)。唉，尽管我筛选了 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'

(注:此代码不适用于当前版本，它假定您在 0.3.8 上，它抛弃了 rv- 并允许您在 Ractive.components 上全局注册组件。)

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