javascript - RiotJs : communication with a tag instance

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])
  })  

如果你想访问子标签，假设 vader 是父标签，leia 和 luke 是子标签

  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 是相同的，可能您需要使用 self 以免丢失上下文引用

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