从其父代访问活动组件

我发现自己处于想要从父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的一个方法中调用任何组件实例上的无用函数（或者在所有实例上更好）。

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

来源

2013-11-27 skeptic35

更新：这个答案很旧。访问子组件的正确方法是用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')）以及DOM节点。在此期间，我愿意接受任何建议！

来源

2013-11-27 21:57:28

全局命名空间并不是一个选择，因为我正在使用AMD设置。但是现在我正在使用一个相当类似的解决方法，我将对象传递给获取实例注入的组件。尽管找到解决方法并不是我的问题;）。难道只有在rative对象中有一个属性（比如'subcomponents'或其他），它拥有对组件实例的引用吗？ – skeptic35

我看到组件实例在.component.parentFragment.root中保存对“父”的引用，因此理论上我可以使用它将对组件的引用注入到父组件中。唉，这个。当任何回调函数（beforeInit，complete，init）被调用时，组件属性不可用。 – skeptic35

似乎每个组件都应该了解其子项。我想不出一个我用过*的*，至少在桌面上没有。 – Joel

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

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-09 08:38:29

看起来.findComponent()现在这种情况正在做：

ractiveInstance.findComponent(name)

来源

2016-11-17 10:53:20 mikemaccana

从其父代访问活动组件

回答

相关问题