0

2 つの異なる RiotControl ストアを使用して、2 つの類似した Riot コンポーネントでイベントをスコープする最良の方法は何ですか?

現在、コントロール ストアはグローバルであるため、どのボタンが押されても、アクションは両方のタグに適用されます。店舗ごとに 1 つのタグを適用する最善の方法を見つけようとしています。

私の実際のユースケースには複数のネストされたタグがあるため、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

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 に答える