RiotJs: связь с экземпляром тега

Question

Я только начинаю изучать riotJS и не могу понять, как делается связь между тегом (экземплярами). Я создал простой пример. Допустим, у меня есть следующий тег:

<warning-message> 
    <div>{ warning_message }</div> 

    <script> 
     this.warning_message = "Default warning!"; 
     this.on('updateMessage', function(message){ 
      this.warning_message = message; 
     }); 
    </script> 
</warning-message> 

Я думаю, что я могу использовать tagInstance.trigger('updateMessage', someData) сказать экземпляр тега, чтобы обновить сообщение, но как я могу получить ссылку на экземпляр тега из моей основной JS файл, так что я может вызвать метод trigger() на нем? Я думаю, что метод mount() возвращает экземпляр, но что, если вы хотите получить ссылку позже?

Answer 1

Чтобы получить ссылку на экземпляр тега, вы должны это сделать. тегами будет массив с тегами.

riot.compile(function() { 
    tags = riot.mount('*') 
    console.log('root tag',tags[0]) 
    }) 

Если вы хотите получить доступ к детям, скажем, что Вейдер является родительским тегом, Лея и Люк детей помечать

riot.compile(function() { 
    tags = riot.mount('*') 
    console.log('parent',tags[0]) 
    console.log('children',tags[0].tags) 
    console.log('first child by name',tags[0].tags.luke) 
    console.log('second child by hash',tags[0].tags['leia']) 
    }) 

Но я буду рекомендовать наблюдаемый шаблон для тега связи. Подмигнули легко

1) Создать файл store.js

var Store = function(){ 
    riot.observable(this) 
} 

2) В индексе добавить его к глобальному объекту бунта, поэтому он будет доступен в любом месте

<script type="text/javascript"> 
     riot.store = new Store() 
     riot.mount('*') 
    </script> 

3) Тогда в любом теге вы можете иметь:

riot.store.on('hello', function(greeting) { 
    self.hi = greeting 
    self.update() 
}) 

4) И в другом теге:

riot.store.trigger('hello', 'Hello, from Leia')  

Так вы общаетесь с помощью riot.store глобального объекта, отправки и получения сообщений

Живой пример http://plnkr.co/edit/QWXx3UJWYgG6cRo5OCVY?p=preview

В вашем случае, используя riot.store то же самое, вероятно, вам нужно использовать себя, чтобы не потерять контекст ссылки

<script> 
    var self = this 
    this.warning_message = "Default warning!"; 
    riot.store.on('updateMessage', function(message){ 
     self.warning_message = message; 
    }); 
</script> 

, а затем из любого другого вызова тега

riot.store.trigger('updateMessage', 'Hello') 

Answer 2

Если вы не хотите использовать глобальный магазин, взгляните на RiotComponent. Это обеспечивает интуитивно понятную связь между элементами.

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