Aurelia绑定按钮回调函数

我想将定义按钮的对象数组传递给一个自定义元素，如下所示：

<my-panel header="My Title" 
  view-buttons.bind="[{icon: 'fa-plus', display: 'New', action: onNew}]">
</my-panel>

在我的自定义元素中，我正在显示像这样的按钮：

<button repeat.for="btn of viewButtons" class="btn btn-default" click.delegate="goButton(btn)">
  <i class="fa ${btn.icon} fa-fw"></i> ${btn.display}
</button>

我的自定义元素的视图模型中的被调用的函数是：

goButton(btn) {
  if (btn.action) {
    btn.action();
  }
}

我父视图模型中的被调用的函数是：

onNew() {
  window.alert("HORRAY!!!  Now why is this not working?");
  console.log("view=", this.view);  // should be 'home', but displays 'undefined'
  this.view = 'new_view';
}

按钮显示正确，我得到window.alert消息，这意味着父函数被调用。 但是，函数的范围/上下文似乎是错误的（它没有看到或更新父级的this.view ）。

我究竟做错了什么？ 我的猜测是它与action: onNew有关action: onNew但我不知道如何解决它。 如果它是一个绑定参数，我想我可以使用action.call="onNew"但不能在一个对象数组中。 帮帮我！

---

这就是javascript的工作原理。 要解决这个问题，你可以使用：

{icon: 'fa-plus', display: 'New', action: this.onNew.bind(this) }

运行示例：https://gist.run/?id=cefe45c5a402c348d01d41d9cde42489

说明：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Javascript调用（）＆apply（）vs bind（）？

https://alexperry.io/personal/2016/04/03/How-to-use-apply-bind-and-call.html

链接地址: http://www.djcxy.com/p/97007.html

上一篇: Aurelia binding for button callback function

下一篇: How to pass object's method as a parameter in Javascript