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.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