Aurelia綁定，用於按鈕回調函數

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: 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（）與bind（）？

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