Aurelia — доступ к функциям/привязке ViewModel из сгенерированных элементов DOM

У меня есть раздел моего представления (html), который программно генерируется моделью/классом представления. При этом используется Aurelia DOM (Aurelia Docs - pal :: Dom) для создания и добавления необработанных HTML-элементов в представление.

Однако я не могу получить события в сгенерированном html для обратного вызова модели представления. Пример:

let deleteButton = this.dom.createElement("button");
deleteButton.setAttribute("onclick", "cancelCreditNote(`${ row.creditNoteId }`)");

Щелчок по сгенерированной кнопке не приведет к обратному вызову модели представления, которая имеет функцию cancelCreditNote. Различные другие вещи, такие как deleteButton.setAttribute("click.delegate", "cancelCreditNote('${ row.creditNoteId }')");, также не работают.

Кто-нибудь знает, как получить доступ к классу модели представления из основного «сырого» html в aurelia?

К сожалению, в данном случае я не могу использовать стандартный шаблон aurelia для создания HTML.


dom aurelia
person Ash    schedule 26.05.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Свойство DOM в PAL является просто абстракцией для объекта DOM браузера, элемент create, скорее всего, просто вызывает document.createElement, что не позволяет привязать Aurelia к созданному элементу.

Вы можете попробовать использовать aurelia.enhance(context, element), который берет существующий элемент DOM и запускает его через механизм шаблонов.

С помощью этого метода вы также можете передать контекст привязки для применения к элементу.

person Charleh    schedule 30.05.2016

arrow_upward
0
arrow_downward

В моем HTML я использую это:

<div id="collapsesidebar" click.delegate="toggleSidebar()">

В моей модели просмотра у меня есть этот метод:

toggleSidebar(){
    alert('hi');
}

Вы также можете сделать это из своей модели представления с помощью JQuery следующим образом:

attached() {
    $('main').on('click', ()=> alert('hi'));
}

Последний вариант доступен ТОЛЬКО после срабатывания метода attached(): до этого привязка должна выполнить свою работу и только после этого элементы располагаются внутри dom.

Другими словами: это не сработает:

activate(){
    $('main').on('click', ()=> alert('hi'));
}

потому что метод constructor и метод activate запускаются до метода attached.

person Randy    schedule 27.05.2016
comment
Я попробую добавить поведение к элементам в прикрепленном методе и сообщу. - person Ash; 27.05.2016