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() 方法 returns 是一个实例，但是如果你想稍后获取引用怎么办？

Answer 1

要获取标签实例的引用，您必须执行此操作。 tags 将是一个带有标签的数组。

  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)在索引中将它添加到全局 riot 对象中，这样它就可以在任何地方访问

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

Answer 2

如果您不想使用全局存储，请查看 RiotComponent。它以直观的方式实现元素之间的通信。

它基本上允许将方法、可侦听属性和事件添加到元素，以便父元素可以使用它们。

RiotJs：与标签实例通信

RiotJs: communication with a tag instance

javascript

riot.js