Доступ к активным компонентам из их родителя

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 (или даже лучше для всех экземпляров).

Существует, конечно, множество возможных обходных путей (например, использование наблюдателей в компонентах, а затем изменение некоторых общих свойств), но я надеялся на какой-то встроенный интерфейс. Увы, насколько я просеиваю через myRactive Object, я не могу найти ссылку на экземпляры компонентов. Хотя я подозреваю, что это один из них, так как mySomponent (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. Я открыт для любых предложений в то же время!

Answer 2

Вот аналогичное решение я использую:

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'] 

Answer 3

Похоже .findComponent() теперь это делается сейчас:

ractiveInstance.findComponent(name)