0

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

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

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

我在以下位置设置了一个示例： 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)
4

2 回答 2

0

我使用的一种方法是；

  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}:play_toggle', ack)

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

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

于 2017-05-23T14:20:20.897 回答
0

The most elegant solution I came up with so far is to create a global Mixin that defines a scope for all of the controls based on either an attribute on the root element, or its 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
  }
}

This is combined with every trigger to include a scope

toggle(e) {
    RiotControl.trigger('play_toggle', { scope: self.scope })           
}
于 2016-02-29T14:38:57.540 回答