RiotJS + RiotControl 如何为一个 RiotStore 确定事件范围

RiotJS + RiotControl how to scope events for one RiotStore

本文关键字：RiotStore 一个 范围 事件 RiotControl RiotJS      更新时间：2023-09-26

使用两个不同的RiotControl商店在两个相似的Riot组件上限定事件范围的最佳方法是什么？

现在，无论按哪个按钮，操作都会应用于两个标记，因为控件存储是全局的。我正在尝试找出为每个商店确定一个标签范围的最佳方法是什么。

我的实际用例将有多个嵌套标签，因此传递应用商店可能并不理想。

我在以下位置设置了一个示例：https://jsfiddle.net/Lsc3znng/

我的标签：

<script type="riot/tag">
  <play>
    <button onclick={ toggle }>{opts.name}</button>
    <p name="status">unclicked</p>
      var self = this   
      RiotControl.on('play', function() {
        self.status.innerText = "clicked"
      })
      toggle(e) {
        RiotControl.trigger('play_toggle')           
      }
  </play>
</script>

我的商店：

function ButtonControlStore() {
    riot.observable(this)  
  var self = this
  self.on('play_toggle', function() {
    self.trigger('play')
  })  
}
var controlStoreOne = new ButtonControlStore()
var controlStoreTwo = new ButtonControlStore()
RiotControl.addStore(controlStoreOne)
RiotControl.addStore(controlStoreTwo)

到目前为止，我想出的最优雅的解决方案是创建一个全局 Mixin，它根据根元素上的属性或其 id 为所有控件定义范围。

var ScopeMixin = {
  // init method is a special one which can initialize
  // the mixin when it's loaded to the tag and is not
  // accessible from the tag its mixed in
  init: function() {
    this.scope = this.getScope();
  },
  getScope: function() {
    var root = this
    while (root.parent) {
      root = root.parent
    }
    return root.opts.scope || root._riot_id
  }
}

这与每个触发器结合使用以包括一个范围

toggle(e) {
    RiotControl.trigger('play_toggle', { scope: self.scope })           
}

我使用的一种方法是;

  1. 新建存储时，请命名空间/作用域它们。

    var controlStoreOne = new ButtonControlStore({namespace1}) var controlStoreTwo = new ButtonControlStore({namespace2}) 存储被编码为侦听命名空间事件。
    self.on(self.namespace+':'+'play_toggle', function(ack) { self.trigger(ack.evt,ack,'play') })

    也就是说，当你对他们进行 riot.control 一个事件时，它是 RiotControl.trigger（'{namespace1}:p lay_toggle'， ack）

  2. 传递一个确认对象;
    { evt:'{my listenter}', extraData:{} } 存储被编码为在传入的事件名称上触发。 因此，不要盲目触发某些硬编码的事件名称。
    然后我的商店会回复这样的事情。 self.trigger(ack.evt, ack,{the store's produced data})

最后，您的商店是限定范围的，它们只会向任何想要它们的人触发事件

相关文章：