Question

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

<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.call="onNew"但不能在对象数组中使用。救命啊！

Answer 1

这就是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 call() & apply() vs bind()?

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

Aurelia绑定按钮回调函数

1 个答案: