глобальный pub-sub / обработка событий в ractive - PullRequest
Новая
       10

глобальный pub-sub / обработка событий в ractive

0 голосов
/ 17 мая 2018

Я пытаюсь определить лучший способ установить межкомпонентную связь.Моей первой мыслью было использовать ractive.fire с подстановочным знаком, но это, похоже, не работает.Я пытаюсь неправильно использовать ractive.fire?Каков был бы предложенный способ сделать межкомпонентную связь с ractive? 

Ractive.components.pubSub = Ractive.extend({ 
    oninit() {
        this.on('*.customEvent', () => alert('pub sub got your custom event!'))
    }
})
Ractive.components.something = Ractive.extend({ 
    template: '#something'
})
let ractive = new Ractive({
    target: 'body',
    template: '#app'
})
<script src="https://cdn.jsdelivr.net/npm/ractive@0.10.3/ractive.js"></script>
<script id="app" type="text/ractive">
    <pubSub />
    <something />
</script>
<script id="something" type="text/ractive">
    <button on-click="@.fire('customEvent')">Fire Custom Event</button>
</script>

1 Ответ

0 голосов
/ 01 июня 2018

Ractive не предписывает соглашение для обмена данными / межкомпонентной связи.Тем не менее, это дает вам возможность сделать это.Обычная практика, которую я видел, - это создание «фиктивного экземпляра» и использование его методов ractive.fire() и ractive.on(). 

// The dummy instance, make it visible to components.
const pubsub = Ractive()

const SourceComponent = Ractive.extend({
  template: '<button click="send()">Click me</button>',
  send(){
    pubsub.fire('message')
  }
})

const ListeningComponent = Ractive.extend({
  onInit(){
    pubsub.on('message', () => {
      console.log('called')
    })
  }
})

В качестве альтернативы, если все, что вам нужно, это совместно использовать состояние для всех компонентов,измените их в любом месте, и когда каждый из них будет перерисован при изменении, вы можете перевести это состояние в @shared.

...