Aurelia

Question

我有一部分视图 (html) 是由 viewmodel/class 以编程方式生成的。这使用 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 }')"); 等各种其他内容也不起作用。

有谁知道如何从 aurelia 中的 essential 'raw' html 访问视图模型 class？

不幸的是，在这种情况下，我无法使用标准的 aurelia 模板来生成 HTML。

Answer 1

在我的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 方法被触发。

Answer 2

PAL 上的 DOM 属性只是浏览器 DOM 对象的抽象，创建元素可能只是调用 document.createElement，它不提供任何 Aurelia绑定到创建的元素。

您可以尝试使用 aurelia.enhance(context, element)，它采用现有的 DOM 元素并通过模板引擎运行它。

使用此方法，您还可以传递绑定上下文以应用于元素。

Aurelia - 从生成的 DOM 元素中访问 ViewModel functions/binding

Aurelia - Accessing ViewModel functions/binding from within Generated DOM elements

dom