无法让Riot.js observable通过回调传递参数

Question

我的Riot.js observable的工作方式如下。

在我的' global -header‘标签中，riot全局作用域中的riot.store observable被更新(用户在输入字段中输入一个新的高度)，然后observable触发器'update_dims'：

save_height() {
  riot.store.cardHeight = this.refs.input_card_height.value
  riot.store.trigger('update_dims')
}

在我的‘riot.store’标签中，卡片监听'update_dims‘并成功地更新接口中的{ myCardHeight }。

// function updates the card height
update_cardHeight () {
  this.myCardHeight = riot.store.cardHeight
  this.update()
}
// observable runs when triggered and calls above function 'update_cardHeight'
riot.store.on('update_dims',this.update_cardDimensions)

但是，如果我尝试直接从riot.store.trigger传递参数：

save_height() {
  riot.store.cardHeight = this.refs.input_card_height.value
  riot.store.trigger('update_dims','450')
}

下面的观察值不会更新界面，即使me.myCardHeight变量已经使用新的高度参数进行了更新：

me = this
riot.store.on('update_dims', function (height) {
  me.myCardHeight = height
  console.log(me.myCardHeight)
  me.update()
})

这样做的正确方法是什么？

Answer 1

只要你的商店是一个暴乱观察点，这应该是可行的：

riot.store = riot.observable();

var me = this
riot.store.on('update_dims', function (height) {
  me.myCardHeight = height;
  console.log(me.myCardHeight);
  me.update();
});

riot.store.trigger('update_dims', 450);

如果您对将其存储在对象中非常感兴趣，那么我更喜欢使用它自己的属性来创建一个共享存储：

var store = {
  observable: riot.observable(),
  height: 25 // default
}

riot.mount('myCard', {store: store})

然后在标记myCard中

var me = this
me.myCardHeight = opts.store.height;

me.opts.store.on('update_dims', function (height) {
  me.opts.store.height = height;
  me.myCardHeight
  console.log(me.myCardHeight);
  me.update();
});

现在，当您调用它时，您将传入一个新的共享高度：

this.opts.trigger('update_dims', 450);

此外，请查看RiotControl，它可以与这种类型的体系结构一起使用。

希望这能有所帮助！