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 children标签

  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：与标签实例的通信

2 个答案: